﻿<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="dns-prefetch" href="//apps.bdimg.com">
<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-title" content="技术胖-胜洪宇关注web前端技术">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title>技术胖带你玩转ES6视频教程-技术胖-胜洪宇关注web前端技术</title>
<link rel='dns-prefetch' href='//s.w.org' />
<link rel='stylesheet' id='crayon-css'  href='style/css/crayon.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css'  href='style/css/github.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-droid-sans-mono-css'  href='style/css/droid-sans-mono.css' type='text/css' media='all' />
<link rel='stylesheet' id='smartideo_css-css'  href='style/css/smartideo.css' type='text/css' media='screen' />
<link rel='stylesheet' id='toc-screen-css'  href='style/css/screen.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r-font-awesome-front-css'  href='style/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_bootstrap-front-css'  href='style/css/bootstrap-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_animate-css'  href='style/css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='_bootstrap-css'  href='style/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='_fontawesome-css'  href='style/css/font-awesome01.min' type='text/css' media='all' />
<link rel='stylesheet' id='_main-css'  href='style/css/main.css' type='text/css' media='all' />
<link rel='stylesheet' id='xhshop_css-css'  href='style/css/api-form.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/jquery.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/crayon.min.js'></script>
<link rel='https://api.w.org/' href='http://jspang.com/wp-json/' />
<link rel='prev' title='Vue实战视频-快餐店收银系统' href='http://jspang.com/2017/05/22/vuedemo/' />
<link rel='next' title='《前端成神软技能》-7月篇' href='http://jspang.com/2017/06/28/01/' />
<link rel="canonical" href="http://jspang.com/2017/06/03/es6/" />
<link rel='shortlink' href='http://jspang.com/?p=1695' />
<link rel="alternate" type="application/json+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F06%2F03%2Fes6%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F06%2F03%2Fes6%2F&#038;format=xml" />
<style type="text/css">div#toc_container ul li {font-size: 80%;}</style><script type="text/javascript">
(function(url){
	if(/(?:Chrome\/26\.0\.1410\.63 Safari\/537\.31|WordfenceTestMonBot)/.test(navigator.userAgent)){ return; }
	var addEvent = function(evt, handler) {
		if (window.addEventListener) {
			document.addEventListener(evt, handler, false);
		} else if (window.attachEvent) {
			document.attachEvent('on' + evt, handler);
		}
	};
	var removeEvent = function(evt, handler) {
		if (window.removeEventListener) {
			document.removeEventListener(evt, handler, false);
		} else if (window.detachEvent) {
			document.detachEvent('on' + evt, handler);
		}
	};
	var evts = 'contextmenu dblclick drag dragend dragenter dragleave dragover dragstart drop keydown keypress keyup mousedown mousemove mouseout mouseover mouseup mousewheel scroll'.split(' ');
	var logHuman = function() {
		var wfscr = document.createElement('script');
		wfscr.type = 'text/javascript';
		wfscr.async = true;
		wfscr.src = url + '&r=' + Math.random();
		(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(wfscr);
		for (var i = 0; i < evts.length; i++) {
			removeEvent(evts[i], logHuman);
		}
	};
	for (var i = 0; i < evts.length; i++) {
		addEvent(evts[i], logHuman);
	}
})('//jspang.com/?wordfence_lh=1&hid=D4C537DB2780D6EB75549ADE3016C6EB');
</script><meta name="keywords" content="ES6, 其它教程">
<meta name="description" content="文章前言： 文章已经更新结束，共18集视频，2.5万字。建议每天学习1-2节视频，然后配合文字教程进行练习。  文章首发：http://jspang.com  非常高兴你能看到这篇文章，我是你的老朋友技术胖。在写Vue教程的时候，我发现群里的小伙伴大多数还在使用ES5来进行编写，使用ES5这无可厚非，因为ES5毕竟还是主流，速度也更快，但ES6引入的新特性是ES5无法比拟的，所以我鼓励前端小伙伴多">
<style>a:hover, .site-navbar li:hover > a, .site-navbar li.active a:hover, .site-navbar a:hover, .search-on .site-navbar li.navto-search a, .topbar a:hover, .site-nav li.current-menu-item > a, .site-nav li.current-menu-parent > a, .site-search-form a:hover, .branding-primary .btn:hover, .title .more a:hover, .excerpt h2 a:hover, .excerpt .meta a:hover, .excerpt-minic h2 a:hover, .excerpt-minic .meta a:hover, .article-content .wp-caption:hover .wp-caption-text, .article-content a, .article-nav a:hover, .relates a:hover, .widget_links li a:hover, .widget_categories li a:hover, .widget_ui_comments strong, .widget_ui_posts li a:hover .text, .widget_ui_posts .nopic .text:hover , .widget_meta ul a:hover, .tagcloud a:hover, .textwidget a, .textwidget a:hover, .sign h3, #navs .item li a, .url, .url:hover, .excerpt h2 a:hover span, .widget_ui_posts a:hover .text span, .widget-navcontent .item-01 li a:hover span, .excerpt-minic h2 a:hover span, .relates a:hover span{color: #8AC78F;}.btn-primary, .label-primary, .branding-primary, .post-copyright:hover, .article-tags a, .pagination ul > .active > a, .pagination ul > .active > span, .pagenav .current, .widget_ui_tags .items a:hover, .sign .close-link, .pagemenu li.active a, .pageheader, .resetpasssteps li.active, #navs h2, #navs nav, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary, .tag-clouds a:hover{background-color: #8AC78F;}.btn-primary, .search-input:focus, #bdcs .bdcs-search-form-input:focus, #submit, .plinks ul li a:hover,.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary{border-color: #8AC78F;}.search-btn, .label-primary, #bdcs .bdcs-search-form-submit, #submit, .excerpt .cat{background-color: #8AC78F;}.excerpt .cat i{border-left-color:#8AC78F;}@media (max-width: 720px) {.site-navbar li.active a, .site-navbar li.active a:hover, .m-nav-show .m-icon-nav{color: #8AC78F;}}@media (max-width: 480px) {.pagination ul > li.next-page a{background-color:#8AC78F;}}.toc_list li{list-style:none;margin:0px;padding:5px;height:18px;}
</style><link rel="shortcut icon" href="http://jspang.com/favicon.ico">
<!--[if lt IE 9]><script src="style/js/html5.min.js"></script><![endif]-->



</head>
<body class="post-template-default single single-post postid-1695 single-format-standard list-comments-r site-layout-2">
<header class="header">
	<div class="container">
		<div class="logo"><a href="http://jspang.com" title="技术胖-胜洪宇关注web前端技术-前端免费视频第一博客。"><img src="style/images/logo.png">技术胖-胜洪宇关注web前端技术</a></div>		<div class="brand">关注WEB前端技术<br>每年帮助超50万前端爱好者学习</div>		<ul class="site-nav site-navbar">
			<li id="menu-item-1192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1192"><a href="http://jspang.com">首页</a></li>
<li id="menu-item-1188" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-1188"><a href="http://jspang.com/category/learn/">视频教程</a></li>
<li id="menu-item-1186" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1186"><a href="http://jspang.com/category/webnote/">前端日记</a></li>
<li id="menu-item-1190" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1190"><a href="http://jspang.com/category/live/">生活趣事</a></li>
<li id="menu-item-1191" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1191"><a href="http://jspang.com/resume/">自我介绍</a></li>
<li id="menu-item-1291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1291"><a href="http://jspang.com/navbar/">前端导航</a></li>
							<li class="navto-search"><a href="javascript:;" class="search-show active"><i class="fa fa-search"></i></a></li>
					</ul>
		<div class="topbar">
			<ul class="site-nav topmenu">
				
<li class="page_item page-item-1290"><a href="http://jspang.com/navbar/">前端常用网站导航</a></li>
<li class="page_item page-item-2"><a href="http://jspang.com/sample-page/">示例页面</a></li>

								<li class="menusns">
					<a href="javascript:;">关注本站 <i class="fa fa-angle-down"></i></a>
					<ul class="sub-menu">
																																				<li><a target="_blank" href="http://jspang.com/feed/"><i class="fa fa-rss"></i> RSS订阅</a></li>					</ul>
				</li>
							</ul>
					</div>
		<i class="fa fa-bars m-icon-nav"></i>
	</div>
</header>
<div class="site-search">
	<div class="container">
		<form method="get" class="site-search-form" action="http://jspang.com/" ><input class="search-input" name="s" type="text" placeholder="输入关键字" value=""><button class="search-btn" type="submit"><i class="fa fa-search"></i></button></form>	</div>
</div><section class="container">
	<div class="content-wrap">
	<div class="content">
				<header class="article-header">
			<h1 class="article-title"><a href="http://jspang.com/2017/06/03/es6/">技术胖带你玩转ES6视频教程</a></h1>
			<div class="article-meta">
				<span class="item">2017-06-03</span>
												<span class="item">分类：<a href="http://jspang.com/category/learn/other/" rel="category tag">其它教程</a></span>
				<span class="item post-views">阅读(38742)</span>				<span class="item">评论(4)</span>
				<span class="item"></span>
			</div>
		</header>
		<article class="article-content">
						<div id="toc_container" class="toc_wrap_right have_bullets"><p class="toc_title">目录</p><ul class="toc_list"><li><a href="#i">文章前言：</a></li><li><a href="#1es6">第1节：ES6的开发环境搭建</a></li><li><a href="#2">第2节：新的声明方式</a></li><li><a href="#3">第3节：变量的解构赋值</a></li><li><a href="#4rest">第4节：扩展运算符和rest运算符</a></li><li><a href="#5">第5节：字符串模版</a></li><li><a href="#6es6">第6节：ES6数字操作</a></li><li><a href="#7es61">第7节：ES6中新增的数组知识（1）</a></li><li><a href="#8es62">第8节：ES6中新增的数组知识（2）</a></li><li><a href="#9es6">第9节：ES6中的箭头函数和扩展</a></li><li><a href="#10es6">第10节：ES6中的函数和数组补漏</a></li><li><a href="#11es6">第11节：ES6中对象</a></li><li><a href="#12symbol">第12节：Symbol在对象中的作用</a></li><li><a href="#13setweakset">第13节：Set和WeakSet数据结构</a></li><li><a href="#14map">第14节：map数据结构</a></li><li><a href="#15proxy">第15节：用Proxy进行预处理</a></li><li><a href="#16promise">第16节：promise对象的使用</a></li><li><a href="#17class">第17节：class类的使用</a></li><li><a href="#18">第18节：模块化操作</a></li></ul></div>
<h1><span id="i">文章前言：</span></h1>
<p>文章已经更新结束，共18集视频，2.5万字。建议每天学习1-2节视频，然后配合文字教程进行练习。</p>
<p>文章首发：<a href="http://jspang.com">http://jspang.com</a></p>
<p>非常高兴你能看到这篇文章，我是你的老朋友<strong>技术胖</strong>。在写Vue教程的时候，我发现群里的小伙伴大多数还在使用ES5来进行编写，使用ES5这无可厚非，因为ES5毕竟还是主流，速度也更快，但ES6引入的新特性是ES5无法比拟的，所以我鼓励前端小伙伴多使用ES6的语法，这也是我开这篇教程的初衷。我是一个前端工程师，接触IT这一行也有10年了，我会把我在前端这条路上碰到的沟沟坎坎都免费的分享给大家，我并不是什么讲师，至今还奋斗在程序第一线，所以视频是我利用业余时间录制。在视频的学习中如果你有任何疑问可以加<span style="color: #ff0000;">QQ群(364140450)</span>进行讨论。</p>
<p>学习ES6的前置知识：</p>
<ol>
<li>熟练掌握ES5的知识：因为ES6只是ES5的升级，所以你必须对ES5的基本语法达到熟练的程度，如果你还不了解ES5的基本语法，还是脚踏实地从头开始。</li>
<li>了解ES6：听说并在工作学习中见过ES6，并了解ES6的用途。</li>
</ol>
<h1><span id="1es6">第1节：ES6的开发环境搭建</span></h1>
<p>工欲善其事，必先利其器。所以我们第1节就是搭建一个基本的ES6开发环境。现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法。如果你听过我Vue课程的话，应该知道Webpack是有自动编译转换能力的，除了Webpack自动编译，我们还可以用Babel来完成。这节课我们就使用Babel把ES6编译成ES5。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=h0510ft4cl5&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>建立工程目录：</h3>
<p>先建立一个项目的工程目录，并在目录下边建立两个文件夹：<strong>src</strong>和<strong>dist</strong></p>
<ul>
<li>src：书写ES6代码的文件夹，写的js程序都放在这里。</li>
<li>dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。</li>
</ul>
<h3>编写index.html：</h3>
<p>文件夹建立好后，我们新建一个index.html文件。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3069847388989" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;script src="./dist/index.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        Hello ECMA Script 6
    &lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3069847388989-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3069847388989-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3069847388989-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3069847388989-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3069847388989-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3069847388989-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3069847388989-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3069847388989-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f3069847388989-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3069847388989-10">10</div><div class="crayon-num" data-line="crayon-5a1e77c7f3069847388989-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3069847388989-12">12</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3069847388989-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3069847388989-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3069847388989-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3069847388989-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3069847388989-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3069847388989-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3069847388989-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./dist/index.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3069847388989-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3069847388989-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3069847388989-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello ECMA Script 6</span></div><div class="crayon-line" id="crayon-5a1e77c7f3069847388989-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3069847388989-12"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0317 seconds] -->
<p>需要注意的是在引入js文件时，引入的是dist目录下的文件。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3079385154397" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;script src="./dist/index.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3079385154397-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3079385154397-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./dist/index.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0056 seconds] -->
<p></p>
<h3>编写index.js</h3>
<p>在src目录下，新建index.js文件。这个文件很简单，我们只作一个a变量的声明，并用console.log()打印出来。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f307e919412532" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let a=1;
console.log(a);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f307e919412532-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f307e919412532-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f307e919412532-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f307e919412532-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0113 seconds] -->
<p>我们用了let声明，这里let是ES6的一种声明方式，接下来我们需要把这个ES6的语法文件自动编程成ES5的语法文件。</p>
<h3>初始化项目</h3>
<p>在安装Babel之前，需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3082488724464" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm init -y</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3082488724464-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3082488724464-1"><span class="crayon-e">npm </span><span class="crayon-v">init</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-v">y</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0099 seconds] -->
<p>-y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3085010588876" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3085010588876-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3085010588876-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3085010588876-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3085010588876-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3085010588876-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3085010588876-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3085010588876-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3085010588876-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f3085010588876-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3085010588876-10">10</div><div class="crayon-num" data-line="crayon-5a1e77c7f3085010588876-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3085010588876-12">12</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3085010588876-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3085010588876-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"name"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"es6"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3085010588876-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"version"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"1.0.0"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3085010588876-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"description"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3085010588876-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"main"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"index.js"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3085010588876-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3085010588876-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"test"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3085010588876-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3085010588876-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"keywords"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3085010588876-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"author"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3085010588876-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"license"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"ISC"</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3085010588876-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>可以根据自己的需要进行修改，比如我们修改name的值。</p>
<h3>全局安装Babel-cli</h3>
<p>在终端中输入以下命令,如果你安装很慢的话，可以使用淘宝镜像的cnpm来进行安装。安装cnpm的方法，大家自己百度吧。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3089619570790" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install -g babel-cli</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3089619570790-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3089619570790-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-v">babel</span><span class="crayon-o">-</span><span class="crayon-v">cli</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0058 seconds] -->
<p>虽然已经安装了babel-cli，只是这样还不能成功进行转换，如果你不相信可以输入下边的命令试一下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f308d677215406" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
babel src/index.js -o dist/index.js</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f308d677215406-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f308d677215406-1"><span class="crayon-e">babel </span><span class="crayon-v">src</span><span class="crayon-o">/</span><span class="crayon-v">index</span><span class="crayon-e">.js</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">o</span><span class="crayon-h"> </span><span class="crayon-v">dist</span><span class="crayon-o">/</span><span class="crayon-v">index</span><span class="crayon-e">.js</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>你会发现，在dist目录下确实生产了index.js文件，但是文件并没有变化，还是使用了ES6的语法。因为我们还需要安装转换包才能成功转换，继续往下看吧。</p>
<h3>本地安装babel-preset-es2015 和 babel-cli</h3>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3090364782831" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev babel-preset-es2015 babel-cli</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3090364782831-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3090364782831-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">babel</span><span class="crayon-o">-</span><span class="crayon-v">preset</span><span class="crayon-o">-</span><span class="crayon-e">es2015 </span><span class="crayon-v">babel</span><span class="crayon-o">-</span><span class="crayon-v">cli</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3095165225391" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3095165225391-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3095165225391-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3095165225391-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3095165225391-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3095165225391-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"devDependencies"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3095165225391-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"babel-cli"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"^6.24.1"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3095165225391-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"babel-preset-es2015"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"^6.24.1"</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3095165225391-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p></p>
<h3>新建.babelrc</h3>
<p>在根目录下新建.babelrc文件，并打开录入下面的代码</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3098044008832" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3098044008832-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3098044008832-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3098044008832-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3098044008832-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3098044008832-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3098044008832-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3098044008832-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3098044008832-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"presets"</span><span class="crayon-o">:</span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-5a1e77c7f3098044008832-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"es2015"</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3098044008832-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3098044008832-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"plugins"</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3098044008832-6"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>这个文件我们建立完成后，现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f309b723354755" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
babel src/index.js -o dist/index.js</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f309b723354755-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f309b723354755-1"><span class="crayon-e">babel </span><span class="crayon-v">src</span><span class="crayon-o">/</span><span class="crayon-v">index</span><span class="crayon-e">.js</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">o</span><span class="crayon-h"> </span><span class="crayon-v">dist</span><span class="crayon-o">/</span><span class="crayon-v">index</span><span class="crayon-e">.js</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p></p>
<h3>简化转化命令：</h3>
<p>在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，把文件修改成下面的样子。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f309f604075601" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f309f604075601-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f309f604075601-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f309f604075601-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f309f604075601-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f309f604075601-5">5</div><div class="crayon-num crayon-marked-num crayon-top crayon-striped-num" data-line="crayon-5a1e77c7f309f604075601-6">6</div><div class="crayon-num crayon-marked-num" data-line="crayon-5a1e77c7f309f604075601-7">7</div><div class="crayon-num crayon-marked-num crayon-bottom crayon-striped-num" data-line="crayon-5a1e77c7f309f604075601-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f309f604075601-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f309f604075601-10">10</div><div class="crayon-num" data-line="crayon-5a1e77c7f309f604075601-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f309f604075601-12">12</div><div class="crayon-num" data-line="crayon-5a1e77c7f309f604075601-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f309f604075601-14">14</div><div class="crayon-num" data-line="crayon-5a1e77c7f309f604075601-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f309f604075601-16">16</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f309f604075601-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f309f604075601-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"name"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"es6"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f309f604075601-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"version"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"1.0.0"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f309f604075601-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"description"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f309f604075601-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"main"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"index.js"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-striped-line" id="crayon-5a1e77c7f309f604075601-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line" id="crayon-5a1e77c7f309f604075601-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"build"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"babel src/index.js -o dist/index.js"</span></div><div class="crayon-line crayon-marked-line crayon-bottom crayon-striped-line" id="crayon-5a1e77c7f309f604075601-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f309f604075601-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"keywords"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f309f604075601-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"author"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f309f604075601-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"license"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"ISC"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f309f604075601-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"devDependencies"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f309f604075601-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"babel-cli"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"^6.24.1"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f309f604075601-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"babel-preset-es2015"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"^6.24.1"</span></div><div class="crayon-line" id="crayon-5a1e77c7f309f604075601-15"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f309f604075601-16"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>修改好后，以后我们就可以使用 npm run build 来进行转换了。</p>
<h1><span id="2">第2节：新的声明方式</span></h1>
<p>通过上节课的学习我们已经可以愉快的写代码了。在文章开始之前，我还是要强调一件事情:大家一定要亲自动手敲代码，学习编程这个事儿，不自己动手练习是学不会的。如果你上节课还没有搭建好，你还是先把环境搭建好，再学习这节课。</p>
<p>以前我们在声明时只有一种方法，就是使用<strong>var</strong>来进行声明，ES6对声明的进行了扩展，现在可以有三种声明方式了。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=v0510wo1l22&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>字面理解ES6的三种声明方式：</p>
<ol>
<li>var：它是variable的简写，可以理解成变量的意思。</li>
<li>let：它在英文中是“让”的意思，也可以理解为一种声明的意思。</li>
<li>const：它在英文中也是常量的意思，在ES6也是用来声明常量的，常量你可以简单理解为不变的量。</li>
</ol>
<h3>var声明：</h3>
<p>var在ES6里是用来升级全局变量的，我们可以先作一个最简单的实例，用var声明一个变量a,然后用console.log进行输出。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30a3041773524" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var a='JSPang';
console.log(a);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30a3041773524-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30a3041773524-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30a3041773524-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-s">'JSPang'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30a3041773524-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p>我们可以看到JSPang在控制台已经被打印出来了。那如何理解它的作用是声明全局变量那？我们用匿名函数给他进行一个包裹，然后在匿名函数中调用这个a变量，看看能不能调用到。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30a7529397477" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var a="JSPang";
window.onload= function(){
    console.log(a);
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30a7529397477-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30a7529397477-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30a7529397477-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30a7529397477-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30a7529397477-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-s">"JSPang"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30a7529397477-2"><span class="crayon-v">window</span><span class="crayon-sy">.</span><span class="crayon-v">onload</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f30a7529397477-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30a7529397477-4"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>可以看到控制台输出了JSPang，这证明var确实是全局的。如果你觉的这个不够直观说明var是全局声明，还可以用区块的方式进行调用测试，先看下面的代码。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30aa182280561" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var a=2;
{
   var a=3;
}
console.log(a);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30aa182280561-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30aa182280561-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30aa182280561-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30aa182280561-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f30aa182280561-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30aa182280561-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">2</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30aa182280561-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f30aa182280561-3"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">3</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30aa182280561-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f30aa182280561-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>这时打印出来的值是多少那？对，应该是3，因为var是全局声明的。</p>
<h3>let局部声明</h3>
<p>通过两个简单的例子，我们对var的全局声明有了一定了解。那跟var向对应的是let，它是局部变量声明。还是上面的例子，我们试着在区块里用let声明。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30ad938396364" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var a=2;
{
   let a=3;
}
console.log(a);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30ad938396364-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ad938396364-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30ad938396364-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ad938396364-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f30ad938396364-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30ad938396364-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">2</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ad938396364-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f30ad938396364-3"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">3</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ad938396364-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f30ad938396364-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>这时候控制台打印出来的值就是2了。如果我们只在区块里声明，不再外部声明，我们打印a时就会报错，显示找不到变量。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30b0254247805" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
{
   let a=3;
}
console.log(a);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30b0254247805-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30b0254247805-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30b0254247805-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30b0254247805-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30b0254247805-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30b0254247805-2"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">3</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30b0254247805-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30b0254247805-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>上面两个例子说明了let是局部变量声明，let声明只在区块内起作用，外部是不可以调用的。</p>
<p>有些刚接触JavaScript的小伙伴会疑惑了，我感觉let还没有var好用，其实let是防止你的数据污染的，在大型项目中是非常有用处的。现在看一个循环的例子，我们来看一下let的好处。</p>
<h4>用var声明的循环</h4>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30b3338672811" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
for(var i=0;i&lt;10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30b3338672811-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30b3338672811-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30b3338672811-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30b3338672811-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30b3338672811-1"><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">&lt;</span><span class="crayon-cn">10</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30b3338672811-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'循环体中:'</span><span class="crayon-o">+</span><span class="crayon-v">i</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30b3338672811-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30b3338672811-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'循环体外:'</span><span class="crayon-o">+</span><span class="crayon-v">i</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>你会发现循环体外的i变量被污染了，如果在外部再使用i时就会出现问题，这是开发者不想看到的。我们再利用let声明，就可以解决这个问题。</p>
<p>用let声明的循环</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30b6760592488" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
for(let i=0;i&lt;10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30b6760592488-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30b6760592488-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30b6760592488-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30b6760592488-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30b6760592488-1"><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">&lt;</span><span class="crayon-cn">10</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30b6760592488-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'循环体中:'</span><span class="crayon-o">+</span><span class="crayon-v">i</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30b6760592488-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30b6760592488-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'循环体外:'</span><span class="crayon-o">+</span><span class="crayon-v">i</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0080 seconds] -->
<p>你执行时会发现控制台报错了，找不到循环体外的i变量。通过两种声明的比较，可以明白let在防止程序数据污染上还是很有用处的。我们要努力去习惯用let声明，减少var声明去污染全局空间，在vue的使用中也要注意这点。</p>
<h3>const声明常量</h3>
<p>在程序开发中，有些变量是希望声明后在业务层就不再发生变化了，简单来说就是从声明开始，这个变量始终不变，就需要用const进行声明。</p>
<p>我们来一段用const声明错误的代码，在错误中学习const的特性也是非常好的。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30ba355398702" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const a="JSPang";
var a='技术胖';
console.log(a);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30ba355398702-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ba355398702-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30ba355398702-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30ba355398702-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-s">"JSPang"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ba355398702-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30ba355398702-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>在编译这段代码的过程中，你就会发现已经报错，无法编译了，原因就是我们const声明的变量是不可以改变的。const是很好理解的，我就不作过多的解释说明了。</p>
<p>这节课我们学了ES6的3种声明方式，var、let、const，这三种方式各有所长，既然已经学习了新技术，我们就要拥抱它，试着在你的项目中根据情况用let和const进行声明吧，不要再只使用var了。</p>
<p>下节课我们将讲解数据的解构，很高兴你能和我一起学习，成长为更好的自己。</p>
<h1><span id="3">第3节：变量的解构赋值</span></h1>
<p>ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。也许你还是不太明白，那先来一个最简单的<strong>数组解构赋值</strong>来进行赋值。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=k051249rb7m&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>数组的解构赋值：</h3>
<p><strong>简单的数组解构：</strong></p>
<p>以前，为变量赋值，我们只能直接指定值。比如下面的代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30be132104954" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let a=0;
let b=1;
let c=2;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30be132104954-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30be132104954-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30be132104954-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30be132104954-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30be132104954-2"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30be132104954-3"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">c</span><span class="crayon-o">=</span><span class="crayon-cn">2</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>而现在我们可以用数组解构的方式来进行赋值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30c1903300857" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let [a,b,c]=[1,2,3];</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30c1903300857-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30c1903300857-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">,</span><span class="crayon-v">c</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">3</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>上面的代码表示，可以从数组中提取值，按照位置的对象关系对变量赋值。</p>
<p><strong>数组模式和赋值模式统一：</strong></p>
<p>可以简单的理解为等号左边和等号右边的形式要统一，如果不统一解构将失败。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30c4587341808" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let [a,[b,c],d]=[1,[2,3],4];</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30c4587341808-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30c4587341808-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-sy">[</span><span class="crayon-v">b</span><span class="crayon-sy">,</span><span class="crayon-v">c</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-v">d</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">3</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-cn">4</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0069 seconds] -->
<p>如果等号两边形式不一样，很可能获得undefined或者直接报错。</p>
<p><strong>解构的默认值</strong>：</p>
<p>解构赋值是允许你使用默认值的，先看一个最简单的默认是的例子。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30c7105711089" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let [foo = true] =[];
console.log(foo); //控制台打印出true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30c7105711089-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30c7105711089-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30c7105711089-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">foo</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30c7105711089-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">foo</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//控制台打印出true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>上边的例子数组中只有一个值，可能你会多少有些疑惑，我们就来个多个值的数组，并给他一些默认值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30ca922836554" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let [a,b="JSPang"]=['技术胖']
console.log(a+b); //控制台显示“技术胖JSPang”</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30ca922836554-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ca922836554-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30ca922836554-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-s">"JSPang"</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ca922836554-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//控制台显示“技术胖JSPang”</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>现在我们对默认值有所了解，需要注意的是<strong>undefined</strong>和<strong>null</strong>的区别。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30cd878982005" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let [a,b="JSPang"]=['技术胖',undefined];
console.log(a+b); //控制台显示“技术胖JSPang”</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30cd878982005-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30cd878982005-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30cd878982005-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-s">"JSPang"</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-v">undefined</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30cd878982005-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//控制台显示“技术胖JSPang”</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>undefined相当于什么都没有，b是默认值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30d0222978904" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let [a,b="JSPang"]=['技术胖',null];
console.log(a+b); //控制台显示“技术胖null”</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30d0222978904-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30d0222978904-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30d0222978904-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-s">"JSPang"</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-t">null</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30d0222978904-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//控制台显示“技术胖null”</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。</p>
<h3>对象的解构赋值</h3>
<p>解构不仅可以用于数组，还可以用于对象。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30d3417537143" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let {foo,bar} = {foo:'JSPang',bar:'技术胖'};
console.log(foo+bar); //控制台打印出了“JSPang技术胖”</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30d3417537143-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30d3417537143-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30d3417537143-1"><span class="crayon-e">let</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">foo</span><span class="crayon-sy">,</span><span class="crayon-v">bar</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">foo</span><span class="crayon-o">:</span><span class="crayon-s">'JSPang'</span><span class="crayon-sy">,</span><span class="crayon-v">bar</span><span class="crayon-o">:</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30d3417537143-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">foo</span><span class="crayon-o">+</span><span class="crayon-v">bar</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//控制台打印出了“JSPang技术胖”</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p><span style="color: #ff0000;"><strong>注意：</strong></span>对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。</p>
<p><strong>圆括号的使用</strong></p>
<p>如果在解构之前就定义了变量，这时候你再解构会出现问题。下面是错误的代码，编译会报错。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30d6563261058" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let foo;
{foo} ={foo:'JSPang'};
console.log(foo);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30d6563261058-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30d6563261058-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30d6563261058-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30d6563261058-1"><span class="crayon-e">let </span><span class="crayon-v">foo</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30d6563261058-2"><span class="crayon-sy">{</span><span class="crayon-v">foo</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">foo</span><span class="crayon-o">:</span><span class="crayon-s">'JSPang'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30d6563261058-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">foo</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>要解决报错，使程序正常，我们这时候只要在解构的语句外边加一个圆括号就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30d9719301580" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let foo;
({foo} ={foo:'JSPang'});
console.log(foo); //控制台输出jspang</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30d9719301580-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30d9719301580-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30d9719301580-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30d9719301580-1"><span class="crayon-e">let </span><span class="crayon-v">foo</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30d9719301580-2"><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">foo</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">foo</span><span class="crayon-o">:</span><span class="crayon-s">'JSPang'</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30d9719301580-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">foo</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//控制台输出jspang</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p></p>
<h3>字符串解构</h3>
<p>字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30dc345456172" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
const [a,b,c,d,e,f]="JSPang";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30dc345456172-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30dc345456172-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30dc345456172-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30dc345456172-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f30dc345456172-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30dc345456172-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f30dc345456172-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30dc345456172-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">,</span><span class="crayon-v">c</span><span class="crayon-sy">,</span><span class="crayon-v">d</span><span class="crayon-sy">,</span><span class="crayon-v">e</span><span class="crayon-sy">,</span><span class="crayon-v">f</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-s">"JSPang"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30dc345456172-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30dc345456172-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30dc345456172-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">c</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30dc345456172-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">d</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30dc345456172-6"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">e</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30dc345456172-7"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">f</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0040 seconds] -->
<p>&nbsp;</p>
<p>总结：这节课的内容很简单，但是也有一些细节需要注意，希望你能动手把解构练习一遍，在实战项目中解构Json数据格式还是很普遍的，有了ES6得帮助，提高了不少工作效率。</p>
<h1><span id="4rest">第4节：扩展运算符和rest运算符</span></h1>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=f0514dgadbx&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>上节课学的解构已经可以大大增加我们的开发效率，这节课我们学习扩展运算符和rest运算符，它们都是&#8230;（三个点）。它们可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。</p>
<h3>对象扩展运算符（&#8230;）：</h3>
<p>当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数，看一个简单的列子：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30e0799683585" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function jspang(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);

}
jspang(1,2,3);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30e0799683585-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30e0799683585-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30e0799683585-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30e0799683585-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f30e0799683585-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30e0799683585-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f30e0799683585-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30e0799683585-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30e0799683585-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">jspang</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-v">arg</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30e0799683585-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arg</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30e0799683585-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arg</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30e0799683585-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arg</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30e0799683585-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arg</span><span class="crayon-sy">[</span><span class="crayon-cn">3</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30e0799683585-6">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f30e0799683585-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30e0799683585-8"><span class="crayon-e">jspang</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0063 seconds] -->
<p>这时我们看到控制台输出了 1,2,3，undefined，这说明是可以传入多个值，并且就算方法中引用多了也不会报错。</p>
<p><strong>扩展运算符的用处：</strong></p>
<p>我们先用一个例子说明，我们声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30e4904914783" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr1=['www','jspang','com'];
let arr2=arr1;
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr1);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30e4904914783-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30e4904914783-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30e4904914783-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30e4904914783-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f30e4904914783-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30e4904914783-1"><span class="crayon-e">let </span><span class="crayon-v">arr1</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'www'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'com'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30e4904914783-2"><span class="crayon-e">let </span><span class="crayon-v">arr2</span><span class="crayon-o">=</span><span class="crayon-v">arr1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30e4904914783-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30e4904914783-4"><span class="crayon-v">arr2</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-s">'shengHongYu'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30e4904914783-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0048 seconds] -->
<p><strong>控制台输出：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30e6073071120" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
["www", "jspang", "com"]
["www", "jspang", "com", "shengHongYu"]</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30e6073071120-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30e6073071120-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30e6073071120-1"><span class="crayon-sy">[</span><span class="crayon-s">"www"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"jspang"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"com"</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30e6073071120-2"><span class="crayon-sy">[</span><span class="crayon-s">"www"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"jspang"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"com"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"shengHongYu"</span><span class="crayon-sy">]</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>这是我们不想看到的，可以利用对象扩展运算符简单的解决这个问题，现在我们对代码进行改造。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30ea667775074" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr1=['www','jspang','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr2);
console.log(arr1);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30ea667775074-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ea667775074-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30ea667775074-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ea667775074-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f30ea667775074-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ea667775074-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f30ea667775074-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30ea667775074-1"><span class="crayon-e">let </span><span class="crayon-v">arr1</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'www'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'com'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ea667775074-2"><span class="crayon-c">//let arr2=arr1;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30ea667775074-3"><span class="crayon-e">let </span><span class="crayon-v">arr2</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-v">arr1</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ea667775074-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30ea667775074-5"><span class="crayon-v">arr2</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-s">'shengHongYu'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ea667775074-6"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30ea667775074-7"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>现在控制台预览时，你可以看到我们的arr1并没有改变，简单的扩展运算符就解决了这个问题。</p>
<h3>rest运算符</h3>
<p>如果你已经很好的掌握了对象扩展运算符，那么理解rest运算符并不困难，它们有很多相似之处，甚至很多时候你不用特意去区分。它也用&#8230;（三个点）来表示，我们先来看一个例子。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30ed380319774" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function jspang(first,...arg){
    console.log(arg.length);
}

jspang(0,1,2,3,4,5,6,7);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30ed380319774-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ed380319774-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30ed380319774-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30ed380319774-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f30ed380319774-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30ed380319774-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">jspang</span><span class="crayon-sy">(</span><span class="crayon-v">first</span><span class="crayon-sy">,</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-v">arg</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ed380319774-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arg</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30ed380319774-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30ed380319774-4">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f30ed380319774-5"><span class="crayon-e">jspang</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-cn">4</span><span class="crayon-sy">,</span><span class="crayon-cn">5</span><span class="crayon-sy">,</span><span class="crayon-cn">6</span><span class="crayon-sy">,</span><span class="crayon-cn">7</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0066 seconds] -->
<p>这时候控制台打印出了7，说明我们arg里有7个数组元素，这就是rest运算符的最简单用法。</p>
<p>如何循环输出rest运算符</p>
<p>这里我们用for&#8230;of循环来进行打印出arg的值，我们这里只是简单使用一下，以后我们会专门讲解for&#8230;of循环。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30f0201526150" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function jspang(first,...arg){
    for(let val of arg){
        console.log(val);
    }
}

jspang(0,1,2,3,4,5,6,7);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30f0201526150-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30f0201526150-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30f0201526150-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30f0201526150-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f30f0201526150-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30f0201526150-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f30f0201526150-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30f0201526150-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">jspang</span><span class="crayon-sy">(</span><span class="crayon-v">first</span><span class="crayon-sy">,</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-v">arg</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30f0201526150-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-e">let </span><span class="crayon-e">val </span><span class="crayon-e">of </span><span class="crayon-v">arg</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f30f0201526150-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30f0201526150-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f30f0201526150-5"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30f0201526150-6">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f30f0201526150-7"><span class="crayon-e">jspang</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-cn">4</span><span class="crayon-sy">,</span><span class="crayon-cn">5</span><span class="crayon-sy">,</span><span class="crayon-cn">6</span><span class="crayon-sy">,</span><span class="crayon-cn">7</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>for&#8230;of的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for&#8230;of循环。有的小伙伴会说了，反正最后要转换成ES5，没有什么差别，但是至少从代码量上我们少打了一些单词，这就是开发效率的提高。</p>
<p>总结：我们这节课学习了对象扩展运算符和reet运算符，它们两个还是非常类似的，但是你要自己区分，这样才能在工作中运用自如。在以后的课程中还会有很多关于扩展运算符和rset运算符的妙用，让我们一起期待吧。</p>
<h1><span id="5">第5节：字符串模版</span></h1>
<p>这节我们主要学习ES6对字符串新增的操作，最重要的就是字符串模版，字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。小伙伴们是不是已经摩拳擦掌等不急了那？那我们就开始吧。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=c0515fqkvuy&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>字符串模版</h3>
<p>先来看一个在ES5下我们的字符串拼接案例:</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30f4983524136" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章，我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
document.write(blog);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30f4983524136-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30f4983524136-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30f4983524136-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30f4983524136-1"><span class="crayon-e">let </span><span class="crayon-v">jspang</span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30f4983524136-2"><span class="crayon-e">let </span><span class="crayon-v">blog</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'非常高兴你能看到这篇文章，我是你的老朋友'</span><span class="crayon-o">+</span><span class="crayon-v">jspang</span><span class="crayon-o">+</span><span class="crayon-s">'。这节课我们学习字符串模版。'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30f4983524136-3"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">write</span><span class="crayon-sy">(</span><span class="crayon-v">blog</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>ES5下必须用<strong>+jspang+</strong>这样的形式进行拼接，这样很麻烦而且很容易出错。ES6新增了字符串模版，可以很好的解决这个问题。字符串模版不再使用<strong>&#8216;xxx&#8217;</strong>这样的单引号，而是换成了<strong><code>xxx</code></strong>这种形式，也叫连接号。这时我们再引用jspang变量就需要用${jspang}这种形式了，我们对上边的代码进行改造。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30f8916832385" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let jspang='技术胖';
let blog = `非常高兴你能看到这篇文章，我是你的老朋友${jspang}。这节课我们学习字符串模版。`;
document.write(blog);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30f8916832385-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30f8916832385-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30f8916832385-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30f8916832385-1"><span class="crayon-e">let </span><span class="crayon-v">jspang</span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30f8916832385-2"><span class="crayon-e">let </span><span class="crayon-v">blog</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">`</span>非常高兴你能看到这篇文章，我是你的老朋友<span class="crayon-sy">$</span><span class="crayon-sy">{</span><span class="crayon-v">jspang</span><span class="crayon-sy">}</span>。这节课我们学习字符串模版。<span class="crayon-sy">`</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30f8916832385-3"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">write</span><span class="crayon-sy">(</span><span class="crayon-v">blog</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>可以看到浏览器出现了和上边代码一样的结果。而且这里边支持<strong>html标签</strong>，可以试着输入一些。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30fb268213353" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let jspang='技术胖';
let blog = `&lt;b&gt;非常高兴你能看到这篇文章&lt;/b&gt;，我是你的老朋友${jspang}。&lt;br/&gt;这节课我们学习字符串模版。`;
document.write(blog);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30fb268213353-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30fb268213353-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30fb268213353-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30fb268213353-1"><span class="crayon-e">let </span><span class="crayon-v">jspang</span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30fb268213353-2"><span class="crayon-e">let </span><span class="crayon-v">blog</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">`</span><span class="crayon-o">&lt;</span><span class="crayon-e">b</span><span class="crayon-o">&gt;</span>非常高兴你能看到这篇文章<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-e">b</span><span class="crayon-o">&gt;</span>，我是你的老朋友<span class="crayon-sy">$</span><span class="crayon-sy">{</span><span class="crayon-v">jspang</span><span class="crayon-sy">}</span>。<span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span>这节课我们学习字符串模版。<span class="crayon-sy">`</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30fb268213353-3"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">write</span><span class="crayon-sy">(</span><span class="crayon-v">blog</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0069 seconds] -->
<p><strong>对运算的支持：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f30fe958726418" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f30fe958726418-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30fe958726418-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f30fe958726418-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f30fe958726418-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f30fe958726418-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30fe958726418-2"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-cn">2</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f30fe958726418-3"><span class="crayon-e">let </span><span class="crayon-v">result</span><span class="crayon-o">=</span><span class="crayon-sy">`</span><span class="crayon-sy">$</span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">}</span><span class="crayon-sy">`</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f30fe958726418-4"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">write</span><span class="crayon-sy">(</span><span class="crayon-v">result</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>强大的字符串模版，在实际开发中，我们可以让后台写一个活动页面，然后轻松的输出给用户。</p>
<h3>字符串查找</h3>
<p>ES6还增加了字符串的查找功能，而且支持中文哦，小伙伴是不是很兴奋。还是拿上边的文字作例子，进行操作。</p>
<p><strong>查找是否存在:</strong></p>
<p>先来看一下ES5的写法，其实这种方法并不实用，给我们的索引位置，我们自己还要确定位置。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3101102640126" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。';
document.write(blog.indexOf(jspang));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3101102640126-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3101102640126-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3101102640126-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3101102640126-1"><span class="crayon-e">let </span><span class="crayon-v">jspang</span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3101102640126-2"><span class="crayon-e">let </span><span class="crayon-v">blog</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3101102640126-3"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">write</span><span class="crayon-sy">(</span><span class="crayon-v">blog</span><span class="crayon-sy">.</span><span class="crayon-e">indexOf</span><span class="crayon-sy">(</span><span class="crayon-v">jspang</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>这是网页中输出了20，我们还要自己判断。</p>
<p>ES6直接用includes就可以判断，不再返回索引值，这样的结果我们更喜欢，更直接。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3105480847658" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。';
document.write(blog.includes(jspang));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3105480847658-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3105480847658-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3105480847658-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3105480847658-1"><span class="crayon-e">let </span><span class="crayon-v">jspang</span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3105480847658-2"><span class="crayon-e">let </span><span class="crayon-v">blog</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3105480847658-3"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">write</span><span class="crayon-sy">(</span><span class="crayon-v">blog</span><span class="crayon-sy">.</span><span class="crayon-e">includes</span><span class="crayon-sy">(</span><span class="crayon-v">jspang</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p><strong>判断开头是否存在：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3107752989444" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
blog.startsWith(jspang);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3107752989444-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3107752989444-1"><span class="crayon-v">blog</span><span class="crayon-sy">.</span><span class="crayon-e">startsWith</span><span class="crayon-sy">(</span><span class="crayon-v">jspang</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0035 seconds] -->
<p><strong>判断结尾是否存在：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f310a955563933" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
blog.endsWith(jspang);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f310a955563933-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f310a955563933-1"><span class="crayon-v">blog</span><span class="crayon-sy">.</span><span class="crayon-e">endsWith</span><span class="crayon-sy">(</span><span class="crayon-v">jspang</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p>需要注意的是：starts和ends 后边都要加s，我开始时经常写错，希望小伙伴们不要采坑。</p>
<h3>复制字符串</h3>
<p>我们有时候是需要字符串重复的，比如分隔符和特殊符号，这时候复制字符串就派上用场了，语法很简单。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f310d638867099" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
document.write('jspang|'.repeat(3));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f310d638867099-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f310d638867099-1"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">write</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang|'</span><span class="crayon-sy">.</span><span class="crayon-e">repeat</span><span class="crayon-sy">(</span><span class="crayon-cn">3</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p>当然ES6对字符串还有一些其它操作，因为实际工作中不太使用，这里就不作太多的介绍了。希望你能动手练习一下，并把这些新特性应用到工作中，否则可能很快就忘记了。</p>
<p>&nbsp;</p>
<h1><span id="6es6">第6节：ES6数字操作</span></h1>
<p>前端编程工作中对数字的操作是非常多的，如果你对数字操作的不好，就很难写出令人惊奇的程序，所以我们这节课重点学习一下ES6新增的一些数字操作方法。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=f0516rhpb81&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>二进制和八进制</h3>
<p>二进制和八进制数字的声明并不是ES6的特性，我们只是做一个常识性的回顾，因为很多新人小伙伴会把他们当成字符串或者不知道是什么，所以这算是赠送的知识点。</p>
<p><strong>二进制声明：</strong></p>
<p>二进制的英文单词是Binary,二进制的开始是0（零），然后第二个位置是b（注意这里大小写都可以实现），然后跟上二进制的值就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3111958496158" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let binary = 0B010101;
console.log(binary);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3111958496158-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3111958496158-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3111958496158-1"><span class="crayon-e">let </span><span class="crayon-v">binary</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">0B010101</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3111958496158-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">binary</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p>这时候浏览器的控制台显示出了21。</p>
<p><strong>八进制声明：</strong></p>
<p>八进制的英文单词是Octal，也是以0（零）开始的，然后第二个位置是O（欧），然后跟上八进制的值就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3114160883771" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let b=0o666;
console.log(b);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3114160883771-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3114160883771-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3114160883771-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-cn">0o666</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3114160883771-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p>这时候浏览器的控制台显示出了438。</p>
<h3>数字判断和转换</h3>
<p><strong>数字验证Number.isFinite( xx )</strong></p>
<p>可以使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3117796321301" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('jspang'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3117796321301-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3117796321301-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3117796321301-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3117796321301-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3117796321301-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3117796321301-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">11</span><span class="crayon-o">/</span><span class="crayon-cn">4</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3117796321301-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">isFinite</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//true</span></div><div class="crayon-line" id="crayon-5a1e77c7f3117796321301-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">isFinite</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//false</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3117796321301-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">isFinite</span><span class="crayon-sy">(</span><span class="crayon-v">NaN</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//false</span></div><div class="crayon-line" id="crayon-5a1e77c7f3117796321301-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">isFinite</span><span class="crayon-sy">(</span><span class="crayon-v">undefined</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//false</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p><strong>NaN验证</strong></p>
<p>NaN是特殊的非数字，可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f311b581199640" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
console.log(Number.isNaN(NaN));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f311b581199640-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f311b581199640-1"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">isNaN</span><span class="crayon-sy">(</span><span class="crayon-v">NaN</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p><strong>判断是否为整数Number.isInteger(xx)</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f311d390498170" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let a=123.1;
console.log(Number.isInteger(a)); //false</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f311d390498170-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f311d390498170-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f311d390498170-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-cn">123.1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f311d390498170-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">isInteger</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//false</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p><strong>整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3120822564549" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let a='9.18';
console.log(Number.parseInt(a)); 
console.log(Number.parseFloat(a));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3120822564549-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3120822564549-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3120822564549-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3120822564549-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-s">'9.18'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3120822564549-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">parseInt</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5a1e77c7f3120822564549-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">parseFloat</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p></p>
<h3>整数取值范围操作</h3>
<p>整数的操作是有一个取值范围的，它的取值范围就是2的53次方。我们先用程序来看一下这个数字是什么.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3123896785796" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let a = Math.pow(2,53)-1;
console.log(a); //9007199254740991</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3123896785796-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3123896785796-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3123896785796-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">pow</span><span class="crayon-sy">(</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">53</span><span class="crayon-sy">)</span><span class="crayon-o">-</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3123896785796-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//9007199254740991</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>在我们计算时会经常超出这个值，所以我们要进行判断，ES6提供了一个常数，叫做最大安全整数，以后就不需要我们计算了。</p>
<p><strong>最大安全整数</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3126717469521" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
console.log(Number.MAX_SAFE_INTEGER);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3126717469521-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3126717469521-1"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-v">MAX_SAFE_INTEGER</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p><strong>最小安全整数</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3129337284596" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
console.log(Number.MIN_SAFE_INTEGER);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3129337284596-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3129337284596-1"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-v">MIN_SAFE_INTEGER</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p><strong>安全整数判断isSafeInteger( )</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f312c495606057" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let a= Math.pow(2,53)-1;
console.log(Number.isSafeInteger(a));//false</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f312c495606057-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f312c495606057-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f312c495606057-1"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">pow</span><span class="crayon-sy">(</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">53</span><span class="crayon-sy">)</span><span class="crayon-o">-</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f312c495606057-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">Number</span><span class="crayon-sy">.</span><span class="crayon-e">isSafeInteger</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//false</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>&nbsp;</p>
<p>总结：这节课我们学习了ES6数字的操作，方法很多，很零散，需要经常复习或者实战中慢慢熟悉。</p>
<h1><span id="7es61">第7节：ES6中新增的数组知识（1）</span></h1>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=t0517cqo10e&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>&nbsp;</p>
<h3>JSON数组格式转换</h3>
<p>JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式，我们先来看一下JSON的数组格式怎么写。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f312f667104241" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let  json = {
    '0': 'jspang',
    '1': '技术胖',
    '2': '大胖逼逼叨',
    length:3
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f312f667104241-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f312f667104241-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f312f667104241-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f312f667104241-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f312f667104241-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f312f667104241-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f312f667104241-1"><span class="crayon-e">let&nbsp;&nbsp;</span><span class="crayon-v">json</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f312f667104241-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'0'</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f312f667104241-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'1'</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f312f667104241-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'2'</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'大胖逼逼叨'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f312f667104241-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">length</span><span class="crayon-o">:</span><span class="crayon-cn">3</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f312f667104241-6"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组，并打印在控制台。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3132502565404" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let  json = {
    '0': 'jspang',
    '1': '技术胖',
    '2': '大胖逼逼叨',
    length:3
}

let arr=Array.from(json);
console.log(arr)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3132502565404-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3132502565404-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3132502565404-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3132502565404-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3132502565404-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3132502565404-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3132502565404-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3132502565404-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f3132502565404-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3132502565404-1"><span class="crayon-e">let&nbsp;&nbsp;</span><span class="crayon-v">json</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3132502565404-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'0'</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3132502565404-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'1'</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3132502565404-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'2'</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'大胖逼逼叨'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3132502565404-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">length</span><span class="crayon-o">:</span><span class="crayon-cn">3</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3132502565404-6"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f3132502565404-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3132502565404-8"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-t">Array</span><span class="crayon-sy">.</span><span class="crayon-e">from</span><span class="crayon-sy">(</span><span class="crayon-v">json</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3132502565404-9"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0051 seconds] -->
<p>实际开发中这种方法还是比较常用的，毕竟节省了我们代码行数，也让我们的程序更清晰。</p>
<h3>Array.of()方法：</h3>
<p>它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串，需要使用eval来进行转换，如果你一个老手程序员都知道eval的效率是很低的，它会拖慢我们的程序。这时候我们就可以使用Array.of方法。我们看下边的代码把一堆数字转换成数组并打印在控制台上：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3136583130477" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr =Array.of(3,4,5,6);
console.log(arr);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3136583130477-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3136583130477-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3136583130477-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-t">Array</span><span class="crayon-sy">.</span><span class="crayon-e">of</span><span class="crayon-sy">(</span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-cn">4</span><span class="crayon-sy">,</span><span class="crayon-cn">5</span><span class="crayon-sy">,</span><span class="crayon-cn">6</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3136583130477-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0027 seconds] -->
<p>当然它不仅可以转换数字，字符串也是可以转换的，看下边的代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3139438251940" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr =Array.of('技术胖','jspang','大胖逼逼叨');
console.log(arr);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3139438251940-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3139438251940-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3139438251940-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-t">Array</span><span class="crayon-sy">.</span><span class="crayon-e">of</span><span class="crayon-sy">(</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'大胖逼逼叨'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3139438251940-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p></p>
<h3>find( )实例方法:</h3>
<p>所谓的实例方法就是并不是以Array对象开始的，而是必须有一个已经存在的数组，然后使用的方法，这就是实例方法（不理解请看下边的代码，再和上边的代码进行比对，你会有所顿悟）。这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数：</p>
<ul>
<li>value：表示当前查找的值。</li>
<li>index：表示当前查找的数组索引。</li>
<li>arr：表示当前数组。</li>
</ul>
<p>在函数中如果找到符合条件的数组元素就进行return，并停止查找。你可以拷贝下边的代码进行测试，就会知道find作用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f313c239700490" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value &gt; 5;
}))</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f313c239700490-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f313c239700490-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f313c239700490-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f313c239700490-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f313c239700490-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-cn">4</span><span class="crayon-sy">,</span><span class="crayon-cn">5</span><span class="crayon-sy">,</span><span class="crayon-cn">6</span><span class="crayon-sy">,</span><span class="crayon-cn">7</span><span class="crayon-sy">,</span><span class="crayon-cn">8</span><span class="crayon-sy">,</span><span class="crayon-cn">9</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f313c239700490-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">find</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">value</span><span class="crayon-sy">,</span><span class="crayon-v">index</span><span class="crayon-sy">,</span><span class="crayon-v">arr</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f313c239700490-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-h"> </span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span><span class="crayon-cn">5</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f313c239700490-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>控制台输出了6，说明找到了符合条件的值，并进行返回了，如果找不到会显示undefined。</p>
<h1><span id="8es62">第8节：ES6中新增的数组知识（2）</span></h1>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=g0517prwi04&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>fill( )实例方法：</h3>
<p>fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3140829648948" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
console.log(arr);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3140829648948-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3140829648948-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3140829648948-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3140829648948-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-cn">4</span><span class="crayon-sy">,</span><span class="crayon-cn">5</span><span class="crayon-sy">,</span><span class="crayon-cn">6</span><span class="crayon-sy">,</span><span class="crayon-cn">7</span><span class="crayon-sy">,</span><span class="crayon-cn">8</span><span class="crayon-sy">,</span><span class="crayon-cn">9</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3140829648948-2"><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">fill</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-cn">5</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3140829648948-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>上边的代码是把数组从第二位到第五位用jspang进行填充。</p>
<h3>数组的遍历</h3>
<p><strong>for&#8230;of循环：</strong></p>
<p>这种形式比ES5的for循环要简单而且高效。先来看一个最简单的for&#8230;of循环。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3143333365905" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','大胖逼逼叨']

for (let item of arr){
    console.log(item);
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3143333365905-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3143333365905-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3143333365905-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3143333365905-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3143333365905-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3143333365905-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'大胖逼逼叨'</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3143333365905-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3143333365905-3"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">let </span><span class="crayon-e">item </span><span class="crayon-e">of </span><span class="crayon-v">arr</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3143333365905-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">item</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3143333365905-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p><strong>for&#8230;of数组索引</strong>:有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3146766206576" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','大胖逼逼叨']
for (let index of arr.keys()){
    console.log(index);
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3146766206576-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3146766206576-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3146766206576-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3146766206576-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3146766206576-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'大胖逼逼叨'</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3146766206576-2"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">let </span><span class="crayon-e">index </span><span class="crayon-e">of </span><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">keys</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3146766206576-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">index</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3146766206576-4"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>可以看到这时的控制台就输出了0,1,2，也就是数组的索引。</p>
<p><strong>同时输出数组的内容和索引</strong>：我们用entries()这个实例方法，配合我们的for&#8230;of循环就可以同时输出内容和索引了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3149855182535" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','大胖逼逼叨']
for (let [index,val] of arr.entries()){
    console.log(index+':'+val);
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3149855182535-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3149855182535-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3149855182535-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3149855182535-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3149855182535-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'大胖逼逼叨'</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3149855182535-2"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">index</span><span class="crayon-sy">,</span><span class="crayon-v">val</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-e">of </span><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">entries</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3149855182535-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">index</span><span class="crayon-o">+</span><span class="crayon-s">':'</span><span class="crayon-o">+</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3149855182535-4"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0016 seconds] -->
<p></p>
<h3>entries( )实例方法：</h3>
<p>entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f314c858434673" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','大胖逼逼叨']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f314c858434673-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f314c858434673-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f314c858434673-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f314c858434673-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f314c858434673-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f314c858434673-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'大胖逼逼叨'</span><span class="crayon-sy">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f314c858434673-2"><span class="crayon-e">let </span><span class="crayon-v">list</span><span class="crayon-o">=</span><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">entries</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f314c858434673-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">list</span><span class="crayon-sy">.</span><span class="crayon-e">next</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f314c858434673-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">list</span><span class="crayon-sy">.</span><span class="crayon-e">next</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f314c858434673-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">list</span><span class="crayon-sy">.</span><span class="crayon-e">next</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>总结：我们通过两节课讲了ES6对数组的扩展，数组在我们的实际开发中是特别重要的，几乎我每天都要编写数组的操作代码，所以这节课一定要在听完之后自己敲一遍代码。</p>
<h1><span id="9es6">第9节：ES6中的箭头函数和扩展</span></h1>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=q05186pq7u3&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>这节课开始，先不着急看ES6中的函数，而是回顾一下ES5中的函数写法。写一个函数，进行一个加法计算。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3150327399413" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function add(a,b){
    return a+b;
}
console.log(add(1,2));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3150327399413-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3150327399413-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3150327399413-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3150327399413-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3150327399413-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3150327399413-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3150327399413-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3150327399413-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>我们声明了一个add函数，然后传入a和b两个值，返回a+b的值。 然后我们在控制台打印了这个函数的返回结果，这里是3.</p>
<h3>默认值</h3>
<p>在ES6中给我们增加了默认值的操作，我们修改上边的代码，可以看到现在只需要传递一个参数也是可以正常运行的。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3153489813902" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function add(a,b=1){
    return a+b;
}
console.log(add(1));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3153489813902-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3153489813902-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3153489813902-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3153489813902-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3153489813902-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3153489813902-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3153489813902-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3153489813902-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p></p>
<h3>主动抛出错误</h3>
<p>在使用Vue的框架中，可以经常看到框架主动抛出一些错误，比如v-for必须有:key值。那尤大神是如何做到的那？其实很简单，ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3156018072731" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function add(a,b=1){
   
    if(a == 0){
        throw new Error('This is error')
    }
     return a+b;
}

console.log(add(0));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3156018072731-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3156018072731-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3156018072731-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3156018072731-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3156018072731-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3156018072731-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3156018072731-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3156018072731-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f3156018072731-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3156018072731-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3156018072731-2"><span class="crayon-h">&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5a1e77c7f3156018072731-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">==</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3156018072731-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">throw</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Error</span><span class="crayon-sy">(</span><span class="crayon-s">'This is error'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5a1e77c7f3156018072731-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3156018072731-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3156018072731-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3156018072731-8">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3156018072731-9"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p></p>
<h3>函数中的严谨模式</h3>
<p>我们在ES中就经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3159607827445" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function add(a,b=1){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}

console.log(add(1));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3159607827445-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3159607827445-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3159607827445-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3159607827445-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3159607827445-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3159607827445-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3159607827445-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3159607827445-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f3159607827445-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3159607827445-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3159607827445-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'use strict'</span></div><div class="crayon-line" id="crayon-5a1e77c7f3159607827445-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">==</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3159607827445-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">throw</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Error</span><span class="crayon-sy">(</span><span class="crayon-s">'This is error'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3159607827445-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3159607827445-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3159607827445-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3159607827445-8">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3159607827445-9"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0082 seconds] -->
<p>上边的代码如果运行的话，你会发现浏览器控制台报错，这是ES6中的一个坑，如果没人指导的话，可能你会陷进去一会。这个错误的原因就是如果你使用了默认值，再使用严谨模式的话，就会有冲突，所以我们要取消默认值的操作，这时候你在运行就正常了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f315c335358624" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function add(a,b){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}

console.log(add(1,2));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f315c335358624-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f315c335358624-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f315c335358624-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f315c335358624-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f315c335358624-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f315c335358624-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f315c335358624-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f315c335358624-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f315c335358624-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f315c335358624-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f315c335358624-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'use strict'</span></div><div class="crayon-line" id="crayon-5a1e77c7f315c335358624-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">==</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f315c335358624-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">throw</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Error</span><span class="crayon-sy">(</span><span class="crayon-s">'This is error'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f315c335358624-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f315c335358624-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f315c335358624-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f315c335358624-8">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f315c335358624-9"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p></p>
<h3>获得需要传递的参数个数</h3>
<p>如果你在使用别人的框架时，不知道别人的函数需要传递几个参数怎么办？ES6为我们提供了得到参数的方法(xxx.length).我们用上边的代码看一下需要传递的参数个数。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f315f663426907" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function add(a,b){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}

console.log(add.length);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f315f663426907-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f315f663426907-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f315f663426907-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f315f663426907-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f315f663426907-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f315f663426907-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f315f663426907-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f315f663426907-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f315f663426907-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f315f663426907-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f315f663426907-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'use strict'</span></div><div class="crayon-line" id="crayon-5a1e77c7f315f663426907-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">==</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f315f663426907-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">throw</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Error</span><span class="crayon-sy">(</span><span class="crayon-s">'This is error'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f315f663426907-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f315f663426907-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f315f663426907-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f315f663426907-8">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f315f663426907-9"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">add</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>这时控制台打印出了2，但是如果我们去掉严谨模式，并给第二个参数加上默认值的话，这时候add.length的值就变成了1， 也就是说它得到的是必须传入的参数。</p>
<h3>箭头函数</h3>
<p>在学习Vue的时候，我已经大量的使用了箭头函数，因为箭头函数真的很好用，我们来看一个最简单的箭头函数。也就是上边我们写的add函数，进行一个改变，写成箭头函数。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3163684995457" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var add =(a,b=1) =&gt; a+b;
console.log(add(1));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3163684995457-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3163684995457-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3163684995457-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">add</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3163684995457-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p><strong>{}的使用</strong></p>
<p>在箭头函数中，方法体内如果是两句话，那就需要在方法体外边加上{}括号。例如下边的代码就必须使用{}.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3166355057772" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var add =(a,b=1) =&gt; {
    console.log('jspang')
    return a+b;
};
console.log(add(1));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3166355057772-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3166355057772-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3166355057772-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3166355057772-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3166355057772-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3166355057772-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">add</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3166355057772-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5a1e77c7f3166355057772-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3166355057772-4"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3166355057772-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>箭头函数中不可加new，也就是说箭头函数不能当构造函数进行使用。</p>
<p>最后我还是要重复强调的是，你一定要动手敲一下代码，要不你是学不会的，在工作中的改变就是学习了ES6得语法，在写新项目的时候尽量使用ES6带来的便利和特点，这样才能快速成长。</p>
<h1><span id="10es6">第10节：ES6中的函数和数组补漏</span></h1>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=i051904mrgv&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>对象的函数解构</h3>
<p>我们在前后端分离时，后端经常返回来JSON格式的数据，前端的美好愿望是直接把这个JSON格式数据当作参数，传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3169861601852" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let json = {
    a:'jspang',
    b:'技术胖'
}
function fun({a,b='jspang'}){
    console.log(a,b);
}
fun(json);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3169861601852-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3169861601852-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3169861601852-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3169861601852-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3169861601852-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3169861601852-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3169861601852-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3169861601852-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3169861601852-1"><span class="crayon-e">let </span><span class="crayon-v">json</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3169861601852-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">a</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3169861601852-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">b</span><span class="crayon-o">:</span><span class="crayon-s">'技术胖'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3169861601852-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f3169861601852-5"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">fun</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3169861601852-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3169861601852-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3169861601852-8"><span class="crayon-e">fun</span><span class="crayon-sy">(</span><span class="crayon-v">json</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>是不是感觉方便了很多，我们再也不用一个个传递参数了。</p>
<p><strong>数组的函数解构</strong></p>
<p>函数能解构JSON，那解构我们的数组就更不在话下了，我们看下边的代码。我们声明一个数组，然后写一个方法，最后用&#8230;进行解构赋值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f316d781273774" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr = ['jspang','技术胖','免费教程'];
function fun(a,b,c){
    console.log(a,b,c);
}

fun(...arr);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f316d781273774-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f316d781273774-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f316d781273774-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f316d781273774-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f316d781273774-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f316d781273774-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f316d781273774-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'免费教程'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f316d781273774-2"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">fun</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">,</span><span class="crayon-v">c</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f316d781273774-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">,</span><span class="crayon-v">c</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f316d781273774-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f316d781273774-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f316d781273774-6"><span class="crayon-e">fun</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-v">arr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0016 seconds] -->
<p>这种方法其实在前面的课程中已经学过了，这里我们就当复习了。</p>
<h3>in的用法</h3>
<p>in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。</p>
<p><strong>对象判断</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3170933902004" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let obj={
    a:'jspang',
    b:'技术胖'
}
console.log('a' in obj);  //true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3170933902004-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3170933902004-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3170933902004-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3170933902004-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3170933902004-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3170933902004-1"><span class="crayon-e">let </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3170933902004-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">a</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f3170933902004-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">b</span><span class="crayon-o">:</span><span class="crayon-s">'技术胖'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3170933902004-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f3170933902004-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'a'</span><span class="crayon-h"> </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p><strong>数组判断</strong></p>
<p>先来看一下ES5判断的弊端，以前会使用length属性进行判断，为0表示没有数组元素。但是这并不准确，或者说真实开发中有弊端。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3173012392187" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=[,,,,,];
console.log(arr.length); //5</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3173012392187-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3173012392187-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3173012392187-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3173012392187-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//5</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0024 seconds] -->
<p>上边的代码输出了5，但是数组中其实全是空值，这就是一个坑啊。那用ES6的in就可以解决这个问题。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3176912408914" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=[,,,,,];
console.log(0 in arr); //false

let arr1=['jspang','技术胖'];
console.log(0 in arr1);  // true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3176912408914-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3176912408914-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3176912408914-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3176912408914-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3176912408914-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3176912408914-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">,</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3176912408914-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-v">arr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//false</span></div><div class="crayon-line" id="crayon-5a1e77c7f3176912408914-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3176912408914-4"><span class="crayon-e">let </span><span class="crayon-v">arr1</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3176912408914-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-v">arr1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">// true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0022 seconds] -->
<p>注意：这里的0指的是数组下标位置是否为空。</p>
<h3>数组的遍历方法</h3>
<p>1.forEach</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3179009975550" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','前端教程'];

arr.forEach((val,index)=&gt;console.log(index,val));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3179009975550-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3179009975550-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3179009975550-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3179009975550-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'前端教程'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3179009975550-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3179009975550-3"><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-st">forEach</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">,</span><span class="crayon-v">index</span><span class="crayon-sy">)</span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">index</span><span class="crayon-sy">,</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。</p>
<p>2.filter</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f317c050223295" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','前端教程'];

arr.filter(x=&gt;console.log(x));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f317c050223295-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f317c050223295-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f317c050223295-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f317c050223295-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'前端教程'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f317c050223295-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f317c050223295-3"><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">filter</span><span class="crayon-sy">(</span><span class="crayon-v">x</span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">x</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>这种方法在Vue实战里我讲过，他其实也有循环的功能，这里我们在复习一遍。</p>
<p>3.some</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f317f075167564" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','前端教程'];

arr.some(x=&gt;console.log(x));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f317f075167564-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f317f075167564-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f317f075167564-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f317f075167564-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'前端教程'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f317f075167564-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f317f075167564-3"><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">some</span><span class="crayon-sy">(</span><span class="crayon-v">x</span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">x</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0019 seconds] -->
<p>4.map</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3182652635027" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','前端教程'];

console.log(arr.map(x=&gt;'web'));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3182652635027-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3182652635027-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3182652635027-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3182652635027-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'前端教程'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3182652635027-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3182652635027-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">map</span><span class="crayon-sy">(</span><span class="crayon-v">x</span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-s">'web'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>map在这里起到一个替换的作用，这个我们后续课程会详细讲解。</p>
<h3>数组转换字符串</h3>
<p>在开发中我们经常会碰到把数组输出成字符串的形式，我们今天学两种方法，你要注意两种方法的区别。</p>
<p>join()方法</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3185242921912" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','前端教程'];

console.log(arr.join('|'));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3185242921912-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3185242921912-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3185242921912-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3185242921912-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'前端教程'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3185242921912-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3185242921912-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-s">'|'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>join()方法就是在数组元素中间，加了一些间隔，开发中很有用处。</p>
<p>toString()方法</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3188880626923" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let arr=['jspang','技术胖','前端教程'];

console.log(arr.toString());</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3188880626923-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3188880626923-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3188880626923-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3188880626923-1"><span class="crayon-e">let </span><span class="crayon-v">arr</span><span class="crayon-o">=</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'前端教程'</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3188880626923-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3188880626923-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">arr</span><span class="crayon-sy">.</span><span class="crayon-e">toString</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>转换时只是是用逗号隔开了。</p>
<h1><span id="11es6">第11节：ES6中对象</span></h1>
<p>对象对于Javascript是非常重要的。在ES6中对象有了很多新特性，</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=v0520nqwsff&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>对象赋值</h3>
<p>ES6允许把声明的变量直接赋值给对象，我们看下面的例子。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f318b017689219" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let name="jspang";
let skill= 'web';
var obj= {name,skill};
console.log(obj);  //Object {name: "jspang", skill: "web"}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f318b017689219-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f318b017689219-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f318b017689219-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f318b017689219-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f318b017689219-1"><span class="crayon-e">let </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"jspang"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f318b017689219-2"><span class="crayon-e">let </span><span class="crayon-v">skill</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'web'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f318b017689219-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">name</span><span class="crayon-sy">,</span><span class="crayon-v">skill</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f318b017689219-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//Object {name: "jspang", skill: "web"}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p></p>
<h3>对象Key值构建</h3>
<p>有时候我们会在后台取出key值，而不是我们前台定义好的，这时候我们如何构建我们的key值那。比如我们在后台取了一个key值，然后可以用[ ] 的形式，进行对象的构建。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f318e722255123" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let key='skill';
var obj={
    [key]:'web'
}
console.log(obj.skill);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f318e722255123-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f318e722255123-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f318e722255123-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f318e722255123-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f318e722255123-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f318e722255123-1"><span class="crayon-e">let </span><span class="crayon-v">key</span><span class="crayon-o">=</span><span class="crayon-s">'skill'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f318e722255123-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f318e722255123-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">[</span><span class="crayon-v">key</span><span class="crayon-sy">]</span><span class="crayon-o">:</span><span class="crayon-s">'web'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f318e722255123-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f318e722255123-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">.</span><span class="crayon-v">skill</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p></p>
<h3>自定义对象方法</h3>
<p>对象方法就是把兑现中的属性，用匿名函数的形式编程方法。这个在以前就有应用，我们这里只是简单的复习一下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3191855391654" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var obj={
    add:function(a,b){
        return a+b;
    }
}
console.log(obj.add(1,2));  //3</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3191855391654-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3191855391654-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3191855391654-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3191855391654-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3191855391654-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3191855391654-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3191855391654-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3191855391654-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">add</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3191855391654-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3191855391654-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f3191855391654-5"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3191855391654-6"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//3</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p></p>
<h3>Object.is(  ) 对象比较</h3>
<p>对象的比较方法,以前进行对象值的比较，经常使用===来判断，比如下面的代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3194206572355" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(obj1.name === obj2.name);//true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3194206572355-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3194206572355-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3194206572355-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3194206572355-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj1</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3194206572355-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj2</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3194206572355-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj1</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-h"> </span><span class="crayon-o">===</span><span class="crayon-h"> </span><span class="crayon-v">obj2</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p>那ES6为我们提供了is方法进行对比。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3197178815919" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(obj1.name === obj2.name);//true
console.log(Object.is(obj1.name,obj2.name)); //true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3197178815919-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3197178815919-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3197178815919-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3197178815919-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3197178815919-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj1</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3197178815919-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj2</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3197178815919-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj1</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-h"> </span><span class="crayon-o">===</span><span class="crayon-h"> </span><span class="crayon-v">obj2</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//true</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3197178815919-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-t">Object</span><span class="crayon-sy">.</span><span class="crayon-st">is</span><span class="crayon-sy">(</span><span class="crayon-v">obj1</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">,</span><span class="crayon-v">obj2</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>区分=== 和 is方法的区别是什么，看下面的代码输出结果。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f319a725175007" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f319a725175007-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f319a725175007-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f319a725175007-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f319a725175007-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f319a725175007-1"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-o">+</span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-o">===</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//true</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f319a725175007-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">NaN</span><span class="crayon-h"> </span><span class="crayon-o">===</span><span class="crayon-h"> </span><span class="crayon-i">NaN</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//false</span></div><div class="crayon-line" id="crayon-5a1e77c7f319a725175007-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-t">Object</span><span class="crayon-sy">.</span><span class="crayon-st">is</span><span class="crayon-sy">(</span><span class="crayon-o">+</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-o">-</span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//false</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f319a725175007-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-t">Object</span><span class="crayon-sy">.</span><span class="crayon-st">is</span><span class="crayon-sy">(</span><span class="crayon-v">NaN</span><span class="crayon-sy">,</span><span class="crayon-v">NaN</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0022 seconds] -->
<p>这太诡异了，我要怎么记忆，那技术胖在这里告诉你一个小妙招，===为同值相等，is()为严格相等。</p>
<h3>Object.assign(  )合并对象</h3>
<p>操作数组时我们经常使用数组合并，那对象也有合并方法，那就是assgin(  )。看一下啊具体的用法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f319d386096491" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var a={a:'jspang'};
var b={b:'技术胖'};
var c={c:'web'};

let d=Object.assign(a,b,c)
console.log(d);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f319d386096491-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f319d386096491-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f319d386096491-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f319d386096491-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f319d386096491-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f319d386096491-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f319d386096491-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f319d386096491-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">b</span><span class="crayon-o">:</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f319d386096491-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">c</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">c</span><span class="crayon-o">:</span><span class="crayon-s">'web'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f319d386096491-4">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f319d386096491-5"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">d</span><span class="crayon-o">=</span><span class="crayon-t">Object</span><span class="crayon-sy">.</span><span class="crayon-e">assign</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">,</span><span class="crayon-v">c</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f319d386096491-6"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">d</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>记得学完了练习一下啊，因为基础知识的点是非常杂的，你不练习很快就忘记了。</p>
<h1><span id="12symbol">第12节：Symbol在对象中的作用</span></h1>
<p>我们通过场景应用的方式学习Symbol，它的意思是全局标记。我们先看看它的声明方式。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=t0521mz9l0m&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>声明Symbol</h3>
<p>我们先来回顾一下我们的数据类型，在最后在看看Symbol如何声明，并进行一个数据类型的判断。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31a0124039692" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var a = new String;
var b = new Number;
var c = new Boolean;
var d = new Array;
var e = new Object; 
var f= Symbol();
console.log(typeof(d));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31a0124039692-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a0124039692-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a0124039692-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a0124039692-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a0124039692-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a0124039692-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a0124039692-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31a0124039692-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-t">String</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a0124039692-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Number</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31a0124039692-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">c</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-t">Boolean</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a0124039692-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">d</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-t">Array</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31a0124039692-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">e</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-t">Object</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a0124039692-6"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">f</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">Symbol</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31a0124039692-7"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">typeof</span><span class="crayon-sy">(</span><span class="crayon-v">d</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p></p>
<h3>Symbol的打印</h3>
<p>我们先声明一个Symbol，然后我们在控制台输出一下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31a3841029937" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var g = Symbol('jspang');
console.log(g);
console.log(g.toString());</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31a3841029937-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a3841029937-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a3841029937-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31a3841029937-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">g</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">Symbol</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a3841029937-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">g</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31a3841029937-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">g</span><span class="crayon-sy">.</span><span class="crayon-e">toString</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>这时候我们仔细看控制台是有区别的，没有toString的是红字，toString的是黑字。</p>
<h3>Symbol在对象中的应用</h3>
<p>看一下如何用Symbol构建对象的Key，并调用和赋值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31a6250408477" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var jspang = Symbol();
var obj={
    [jspang]:'技术胖'
}
console.log(obj[jspang]);
obj[jspang]='web';
console.log(obj[jspang]);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31a6250408477-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a6250408477-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a6250408477-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a6250408477-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a6250408477-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a6250408477-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a6250408477-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31a6250408477-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">jspang</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">Symbol</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a6250408477-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31a6250408477-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">[</span><span class="crayon-v">jspang</span><span class="crayon-sy">]</span><span class="crayon-o">:</span><span class="crayon-s">'技术胖'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a6250408477-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31a6250408477-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">[</span><span class="crayon-v">jspang</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a6250408477-6"><span class="crayon-v">obj</span><span class="crayon-sy">[</span><span class="crayon-v">jspang</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-s">'web'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31a6250408477-7"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">[</span><span class="crayon-v">jspang</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p></p>
<h3>Symbol对象元素的保护作用</h3>
<p>在对象中有很多值，但是循环输出时，并不希望全部输出，那我们就可以使用Symbol进行保护。</p>
<p>没有进行保护的写法：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31a9230241481" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var obj={name:'jspang',skill:'web',age:18};

for (let item in obj){
    console.log(obj[item]);
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31a9230241481-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a9230241481-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a9230241481-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31a9230241481-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31a9230241481-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31a9230241481-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-v">skill</span><span class="crayon-o">:</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-v">age</span><span class="crayon-o">:</span><span class="crayon-cn">18</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a9230241481-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31a9230241481-3"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">let </span><span class="crayon-e">item </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31a9230241481-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">[</span><span class="crayon-v">item</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31a9230241481-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>现在我不想别人知道我的年龄，这时候我就可以使用Symbol来进行循环保护。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31ac276489355" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let obj={name:'jspang',skill:'web'};
let age=Symbol();
obj[age]=18;
for (let item in obj){
    console.log(obj[item]);
} 
console.log(obj);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31ac276489355-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ac276489355-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ac276489355-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ac276489355-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ac276489355-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ac276489355-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ac276489355-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31ac276489355-1"><span class="crayon-e">let </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-v">skill</span><span class="crayon-o">:</span><span class="crayon-s">'web'</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ac276489355-2"><span class="crayon-e">let </span><span class="crayon-v">age</span><span class="crayon-o">=</span><span class="crayon-e">Symbol</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ac276489355-3"><span class="crayon-v">obj</span><span class="crayon-sy">[</span><span class="crayon-v">age</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-cn">18</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ac276489355-4"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">let </span><span class="crayon-e">item </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ac276489355-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">[</span><span class="crayon-v">item</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ac276489355-6"><span class="crayon-sy">}</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5a1e77c7f31ac276489355-7"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0028 seconds] -->
<p>&nbsp;</p>
<h1><span id="13setweakset">第13节：Set和WeakSet数据结构</span></h1>
<p>这节学习Set数据结构，注意这里不是数据类型，而是<strong>数据结构</strong>。它是ES6中新的东西，并且很有用处。Set的数据结构是以数组的形式构建的。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=z0522uh4592&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>Set的声明</h3>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31af280819941" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31af280819941-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31af280819941-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31af280819941-1"><span class="crayon-e">let </span><span class="crayon-v">setArr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Set</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31af280819941-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//Set {"jspang", "技术胖", "web"}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>Set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个，相当于去重。虽然Set很像数组，但是他不是数组。</p>
<h3>Set值的增删查</h3>
<p><strong>追加add：</strong></p>
<p>在使用Array的时候，可以用push进行追加值，那Set稍有不同，它用更语义化的add进行追加。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31b3386674347" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}

setArr.add('前端职场');
console.log(setArr);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31b3386674347-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31b3386674347-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31b3386674347-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31b3386674347-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31b3386674347-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31b3386674347-1"><span class="crayon-e">let </span><span class="crayon-v">setArr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Set</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31b3386674347-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//Set {"jspang", "技术胖", "web"}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31b3386674347-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31b3386674347-4"><span class="crayon-v">setArr</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-s">'前端职场'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31b3386674347-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p><strong>删除delete：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31b6378192892" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}

setArr.add('前端职场');
console.log(setArr); //Set {"jspang", "技术胖", "web", "前端职场"}

setArr.delete('前端职场');
console.log(setArr); //Set {"jspang", "技术胖", "web"}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31b6378192892-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31b6378192892-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31b6378192892-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31b6378192892-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31b6378192892-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31b6378192892-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31b6378192892-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31b6378192892-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31b6378192892-1"><span class="crayon-e">let </span><span class="crayon-v">setArr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Set</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31b6378192892-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//Set {"jspang", "技术胖", "web"}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31b6378192892-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31b6378192892-4"><span class="crayon-v">setArr</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-s">'前端职场'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31b6378192892-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//Set {"jspang", "技术胖", "web", "前端职场"}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31b6378192892-6">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31b6378192892-7"><span class="crayon-v">setArr</span><span class="crayon-sy">.</span><span class="crayon-e">delete</span><span class="crayon-sy">(</span><span class="crayon-s">'前端职场'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31b6378192892-8"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//Set {"jspang", "技术胖", "web"}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p><strong>查找has：</strong></p>
<p>用has进行值的查找，返回的是true或者false。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31b9111630131" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}

console.log(setArr.has('jspang'));//true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31b9111630131-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31b9111630131-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31b9111630131-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31b9111630131-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31b9111630131-1"><span class="crayon-e">let </span><span class="crayon-v">setArr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Set</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31b9111630131-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//Set {"jspang", "技术胖", "web"}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31b9111630131-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31b9111630131-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">.</span><span class="crayon-e">has</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0010 seconds] -->
<p><strong>删除clear:</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31bc769541190" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}
setArr.clear();

console.log(setArray);//true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31bc769541190-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31bc769541190-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31bc769541190-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31bc769541190-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31bc769541190-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31bc769541190-1"><span class="crayon-e">let </span><span class="crayon-v">setArr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Set</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31bc769541190-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//Set {"jspang", "技术胖", "web"}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31bc769541190-3"><span class="crayon-v">setArr</span><span class="crayon-sy">.</span><span class="crayon-e">clear</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31bc769541190-4">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31bc769541190-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArray</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p></p>
<h3>set的循环</h3>
<p><strong>for&#8230;of&#8230;循环：</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31bf311692294" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let setArr = new Set(['jspang','技术胖','web','jspang']);
for (let item of setArr){
    console.log(item);
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31bf311692294-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31bf311692294-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31bf311692294-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31bf311692294-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31bf311692294-1"><span class="crayon-e">let </span><span class="crayon-v">setArr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Set</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31bf311692294-2"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">let </span><span class="crayon-e">item </span><span class="crayon-e">of </span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31bf311692294-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">item</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31bf311692294-4"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0026 seconds] -->
<p><strong>size属性</strong></p>
<p>size属性可以获得Set值的数量。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31c2169824795" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let setArr = new Set(['jspang','技术胖','web','jspang']);
for (let item of setArr){
    console.log(item);
}

console.log(setArr.size);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31c2169824795-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31c2169824795-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31c2169824795-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31c2169824795-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31c2169824795-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31c2169824795-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31c2169824795-1"><span class="crayon-e">let </span><span class="crayon-v">setArr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Set</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31c2169824795-2"><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">let </span><span class="crayon-e">item </span><span class="crayon-e">of </span><span class="crayon-v">setArr</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31c2169824795-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">item</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31c2169824795-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31c2169824795-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31c2169824795-6"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">setArr</span><span class="crayon-sy">.</span><span class="crayon-v">size</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p><strong>forEach循环</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31c4009827078" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let setArr = new Set(['jspang','技术胖','web','jspang']);
setArr.forEach((value)=&gt;console.log(value));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31c4009827078-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31c4009827078-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31c4009827078-1"><span class="crayon-e">let </span><span class="crayon-v">setArr</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Set</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">,</span><span class="crayon-s">'web'</span><span class="crayon-sy">,</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31c4009827078-2"><span class="crayon-v">setArr</span><span class="crayon-sy">.</span><span class="crayon-st">forEach</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-v">value</span><span class="crayon-sy">)</span><span class="crayon-o">=</span><span class="crayon-o">&gt;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">value</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0026 seconds] -->
<p></p>
<h3>WeakSet的声明</h3>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31c7434975428" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let weakObj=new WeakSet();
let obj={a:'jspang',b:'技术胖'}
weakObj.add(obj);

console.log(weakObj);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31c7434975428-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31c7434975428-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31c7434975428-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31c7434975428-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31c7434975428-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31c7434975428-1"><span class="crayon-e">let </span><span class="crayon-v">weakObj</span><span class="crayon-o">=</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">WeakSet</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31c7434975428-2"><span class="crayon-e">let </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">:</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31c7434975428-3"><span class="crayon-v">weakObj</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31c7434975428-4">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31c7434975428-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">weakObj</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>这里需要注意的是，如果你直接在new 的时候就放入值，将报错。</p>
<p>WeakSet里边的值也是不允许重复的，我们来测试一下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31ca284575532" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let weakObj=new WeakSet();
let obj={a:'jspang',b:'技术胖'}
let obj1=obj;

weakObj.add(obj);
weakObj.add(obj1);

console.log(weakObj);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31ca284575532-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ca284575532-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ca284575532-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ca284575532-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ca284575532-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ca284575532-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ca284575532-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ca284575532-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31ca284575532-1"><span class="crayon-e">let </span><span class="crayon-v">weakObj</span><span class="crayon-o">=</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">WeakSet</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ca284575532-2"><span class="crayon-e">let </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-o">:</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ca284575532-3"><span class="crayon-e">let </span><span class="crayon-v">obj1</span><span class="crayon-o">=</span><span class="crayon-v">obj</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ca284575532-4">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31ca284575532-5"><span class="crayon-v">weakObj</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ca284575532-6"><span class="crayon-v">weakObj</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">obj1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ca284575532-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ca284575532-8"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">weakObj</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p>&nbsp;</p>
<p>总结：在实际开发中Set用的比较多，WeakSet用的并不多，但是他对传入值必须是对象作了很好的判断，我们灵活应用还是有一定的用处的。</p>
<h1><span id="14map">第14节：map数据结构</span></h1>
<p>这节课主要学习map的这种ES6新加的数据结构。在一些构建工具中是非常喜欢使用map这种数据结构来进行配置的，因为map是一种灵活，简单的适合一对一查找的数据结构。我们知道的数据结构，已经有了json和set。那map有什么特点。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=c05227qh3s6&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>Json和map格式的对比</h3>
<p>map的效率和灵活性更好</p>
<p>先来写一个JSON，这里我们用对象进行模拟操作。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31ce290278242" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let json = {
    name:'jspang',
    skill:'web'
}
console.log(json.name);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31ce290278242-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ce290278242-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ce290278242-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ce290278242-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ce290278242-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31ce290278242-1"><span class="crayon-e">let </span><span class="crayon-v">json</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ce290278242-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ce290278242-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">skill</span><span class="crayon-o">:</span><span class="crayon-s">'web'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ce290278242-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ce290278242-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">json</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>但是这种反应的速度要低于数组和map结构。而且Map的灵活性要更好，你可以把它看成一种特殊的键值对，但你的key可以设置成数组，值也可以设置成字符串，让它不规律对应起来。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31d1531486003" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let json = {
    name:'jspang',
    skill:'web'
}
console.log(json.name);

var map=new Map();
map.set(json,'iam');
console.log(map);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31d1531486003-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31d1531486003-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31d1531486003-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31d1531486003-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31d1531486003-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31d1531486003-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31d1531486003-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31d1531486003-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f31d1531486003-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31d1531486003-1"><span class="crayon-e">let </span><span class="crayon-v">json</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31d1531486003-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f31d1531486003-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">skill</span><span class="crayon-o">:</span><span class="crayon-s">'web'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31d1531486003-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31d1531486003-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">json</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31d1531486003-6">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31d1531486003-7"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">map</span><span class="crayon-o">=</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Map</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31d1531486003-8"><span class="crayon-v">map</span><span class="crayon-sy">.</span><span class="crayon-e">set</span><span class="crayon-sy">(</span><span class="crayon-v">json</span><span class="crayon-sy">,</span><span class="crayon-s">'iam'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31d1531486003-9"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">map</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0027 seconds] -->
<p>当然也可key字符串，value是对象。我们调换一下位置，依然是符合map的数据结构规范的。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31d4869192893" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
map.set('jspang',json);
console.log(map);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31d4869192893-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31d4869192893-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31d4869192893-1"><span class="crayon-v">map</span><span class="crayon-sy">.</span><span class="crayon-e">set</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">,</span><span class="crayon-v">json</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31d4869192893-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">map</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0024 seconds] -->
<p>&nbsp;</p>
<h3>map的增删查</h3>
<p>上边我们已经会为map增加值了，就是用我们的set方法，这里我就不重复讲解了。直接看如何取出我们的值。</p>
<p><strong>取值get</strong></p>
<p>现在取json对应的值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31d7355607213" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
console.log(map.get(json));</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31d7355607213-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31d7355607213-1"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">map</span><span class="crayon-sy">.</span><span class="crayon-e">get</span><span class="crayon-sy">(</span><span class="crayon-v">json</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p><strong>删除delete</strong></p>
<p>删除delete的特定值：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31da516930530" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
map.delete(json);
console.log(map)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31da516930530-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31da516930530-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31da516930530-1"><span class="crayon-v">map</span><span class="crayon-sy">.</span><span class="crayon-e">delete</span><span class="crayon-sy">(</span><span class="crayon-v">json</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31da516930530-2"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">map</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0025 seconds] -->
<p><strong>size属性</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31dc038895970" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
console.log(map.size);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31dc038895970-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31dc038895970-1"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">map</span><span class="crayon-sy">.</span><span class="crayon-v">size</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p><strong>查找是否存在has</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31df121151923" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
console.log(map.has('jspang'))</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31df121151923-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31df121151923-1"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">map</span><span class="crayon-sy">.</span><span class="crayon-e">has</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p><strong>清楚所有元素clear</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31e2453822145" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
map.clear()</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31e2453822145-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31e2453822145-1"><span class="crayon-v">map</span><span class="crayon-sy">.</span><span class="crayon-e">clear</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0011 seconds] -->
<p>&nbsp;</p>
<p>总结：map在现在开发中已经经常使用，它的灵活性和高效性是我们喜欢的。开发中试着去使用map吧，你一定会喜欢上它的。</p>
<p>&nbsp;</p>
<h1><span id="15proxy">第15节：用Proxy进行预处理</span></h1>
<p>如果你学过我的Vue的课程，一定会知道钩子函数，那如果你刚接触我的博客，并没有学习Vue，那我这里给你简单解释一下什么是钩子函数。当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数，Proxy的存在就可以让我们给函数加上这样的钩子函数，你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为他是函数或者对象的生命周期。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=x05231gkvtt&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>Proxy的应用可以使函数更加强大，业务逻辑更加清楚，而且在编写自己的框架或者通用组件时非常好用。Proxy涉及的内容非常多，那这里我就带你入门并且介绍给你后续的学习方法。</p>
<p>在学习新知识之前，先来回顾一下定义对象的方法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31e6537694001" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var obj={
    add:function(val){
        return val+10;
    },
    name:'I am Jspang'
    
};
console.log(obj.add(100));
console.log(obj.name);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31e6537694001-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31e6537694001-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31e6537694001-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31e6537694001-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31e6537694001-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31e6537694001-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31e6537694001-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31e6537694001-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f31e6537694001-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31e6537694001-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">obj</span><span class="crayon-o">=</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31e6537694001-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">add</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31e6537694001-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">val</span><span class="crayon-o">+</span><span class="crayon-cn">10</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31e6537694001-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f31e6537694001-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-s">'I am Jspang'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31e6537694001-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31e6537694001-7"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31e6537694001-8"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-cn">100</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31e6537694001-9"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">obj</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0019 seconds] -->
<p>声明了一个obj对象，增加了一个对象方法add和一个对象属性name，然后在控制台进行了打印。</p>
<h3>声明Proxy</h3>
<p>我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31e9152649183" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
new Proxy（{},{}）;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31e9152649183-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31e9152649183-1"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Proxy</span>（<span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span>）<span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p>需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。</p>
<p>现在把上边的obj对象改成我们的Proxy形式。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31ec968999063" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am Jspang'
}, {
        get:function(target,key,property){
            console.log('come in Get');
            return target[key];
        }
    });

console.log(pro.name);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31ec968999063-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ec968999063-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ec968999063-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ec968999063-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ec968999063-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ec968999063-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ec968999063-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ec968999063-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ec968999063-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ec968999063-10">10</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ec968999063-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31ec968999063-12">12</div><div class="crayon-num" data-line="crayon-5a1e77c7f31ec968999063-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31ec968999063-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pro</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Proxy</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ec968999063-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">add</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ec968999063-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">val</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">10</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ec968999063-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ec968999063-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'I am Jspang'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ec968999063-6"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ec968999063-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">get</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">target</span><span class="crayon-sy">,</span><span class="crayon-v">key</span><span class="crayon-sy">,</span><span class="crayon-m">property</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ec968999063-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'come in Get'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ec968999063-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">target</span><span class="crayon-sy">[</span><span class="crayon-v">key</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ec968999063-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31ec968999063-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31ec968999063-12">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31ec968999063-13"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">pro</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0031 seconds] -->
<p>可以在控制台看到结果，先输出了come in Get。相当于在方法调用前的钩子函数。</p>
<p><strong>get属性</strong></p>
<p>get属性是在你得到某对象属性值时预处理的方法，他接受三个参数</p>
<ul>
<li>target：得到的目标值</li>
<li>key：目标的key值，相当于对象的属性</li>
<li>property：这个不太常用，用法还在研究中，还请大神指教。</li>
</ul>
<p><strong>set属性</strong></p>
<p>set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。</p>
<ul>
<li>target:目标值。</li>
<li>key：目标的Key值。</li>
<li>value：要改变的值。</li>
<li>receiver：改变前的原始值。</li>
</ul>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31f0219680415" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am Jspang'
}, {
        get:function(target,key){
            console.log('come in Get');
            return target[key];
        },
        set:function(target,key,value,receiver){
            console.log(`    setting ${key} = ${value}`);
            return target[key] = value;
        }

    });

console.log(pro.name);
pro.name='技术胖';
console.log(pro.name);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-10">10</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-12">12</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-14">14</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-16">16</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-18">18</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f0219680415-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f0219680415-20">20</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pro</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Proxy</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">add</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">val</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">10</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">name</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'I am Jspang'</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-6"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">get</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">target</span><span class="crayon-sy">,</span><span class="crayon-v">key</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'come in Get'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">target</span><span class="crayon-sy">[</span><span class="crayon-v">key</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">set</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">target</span><span class="crayon-sy">,</span><span class="crayon-v">key</span><span class="crayon-sy">,</span><span class="crayon-v">value</span><span class="crayon-sy">,</span><span class="crayon-v">receiver</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-sy">`</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">setting</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">{</span><span class="crayon-v">key</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">{</span><span class="crayon-v">value</span><span class="crayon-sy">}</span><span class="crayon-sy">`</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">target</span><span class="crayon-sy">[</span><span class="crayon-v">key</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-15">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-18"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">pro</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f0219680415-19"><span class="crayon-v">pro</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f0219680415-20"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">pro</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0026 seconds] -->
<p></p>
<h3>apply的使用</h3>
<p>apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。看下边的代码。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31f4337022959" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let target = function () {
    return 'I am JSPang';
};
var handler = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments);
    }
}

var pro = new Proxy(target, handler);

console.log(pro());</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31f4337022959-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f4337022959-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f4337022959-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f4337022959-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f4337022959-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f4337022959-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f4337022959-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f4337022959-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f4337022959-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f4337022959-10">10</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f4337022959-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f4337022959-12">12</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f4337022959-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31f4337022959-1"><span class="crayon-e">let </span><span class="crayon-v">target</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f4337022959-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-s">'I am JSPang'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f4337022959-3"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f4337022959-4"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">handler</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f4337022959-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">apply</span><span class="crayon-sy">(</span><span class="crayon-v">target</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">ctx</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">args</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f4337022959-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'do apply'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f4337022959-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">Reflect</span><span class="crayon-sy">.</span><span class="crayon-e">apply</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-v">arguments</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f4337022959-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f4337022959-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f4337022959-10">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31f4337022959-11"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pro</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Proxy</span><span class="crayon-sy">(</span><span class="crayon-v">target</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">handler</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f4337022959-12">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31f4337022959-13"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">pro</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0031 seconds] -->
<p>其实proxy的知识是非常多的，这里我建议看阮一峰大神的《ES6》。我这里只能算是入门课程，俗话说得好：“师傅领进门，修行靠个人”，那我们下节课见了。</p>
<h1><span id="16promise">第16节：promise对象的使用</span></h1>
<p>ES6中的promise的出现给我们很好的解决了回调地狱的问题，在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发，ES6认识到了这点问题，现在promise的使用，完美解决了这个问题。那我们如何理解promise这个单词在ES5中的作用那，你可以想象他是一种承诺，当它成功时执行一些代码，当它失败时执行一些代码。它更符合人类的行为思考习惯，而不在是晦涩难懂的冰冷语言。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=s0523ybfii2&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>promise的基本用法</h3>
<p>promise执行多步操作非常好用，那我们就来模仿一个多步操作的过程，那就以吃饭为例吧。要想在家吃顿饭，是要经过三个步骤的。</p>
<ol>
<li>洗菜做饭。</li>
<li>坐下来吃饭。</li>
<li>收拾桌子洗碗。</li>
</ol>
<p>这个过程是有一定的顺序的，你必须保证上一步完成，才能顺利进行下一步。我们可以在脑海里先想想这样一个简单的过程在ES5写起来就要有多层的嵌套。那我们现在用promise来实现。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31f9446847445" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
let state=1;

function step1(resolve,reject){
    console.log('1.开始-洗菜做饭');
    if(state==1){
        resolve('洗菜做饭--完成');
    }else{
        reject('洗菜做饭--出错');
    }
}


function step2(resolve,reject){
    console.log('2.开始-坐下来吃饭');
    if(state==1){
        resolve('坐下来吃饭--完成');
    }else{
        reject('坐下来吃饭--出错');
    }
}


function step3(resolve,reject){
    console.log('3.开始-收拾桌子洗完');
     if(state==1){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出错');
    }
}

new Promise(step1).then(function(val){
    console.log(val);
    return new Promise(step2);

}).then(function(val){
     console.log(val);
    return new Promise(step3);
}).then(function(val){
    console.log(val);
    return val;
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-10">10</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-12">12</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-14">14</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-16">16</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-18">18</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-20">20</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-22">22</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-24">24</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-26">26</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-28">28</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-30">30</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-32">32</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-34">34</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-36">36</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-38">38</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-40">40</div><div class="crayon-num" data-line="crayon-5a1e77c7f31f9446847445-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31f9446847445-42">42</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-1"><span class="crayon-e">let </span><span class="crayon-v">state</span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-3"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">step1</span><span class="crayon-sy">(</span><span class="crayon-v">resolve</span><span class="crayon-sy">,</span><span class="crayon-v">reject</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'1.开始-洗菜做饭'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">state</span><span class="crayon-o">==</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-s">'洗菜做饭--完成'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">reject</span><span class="crayon-sy">(</span><span class="crayon-s">'洗菜做饭--出错'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-11">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-12">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-13"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">step2</span><span class="crayon-sy">(</span><span class="crayon-v">resolve</span><span class="crayon-sy">,</span><span class="crayon-v">reject</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'2.开始-坐下来吃饭'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">state</span><span class="crayon-o">==</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-s">'坐下来吃饭--完成'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">reject</span><span class="crayon-sy">(</span><span class="crayon-s">'坐下来吃饭--出错'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-20"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-21">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-22">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-23"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">step3</span><span class="crayon-sy">(</span><span class="crayon-v">resolve</span><span class="crayon-sy">,</span><span class="crayon-v">reject</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">'3.开始-收拾桌子洗完'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">state</span><span class="crayon-o">==</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-s">'收拾桌子洗完--完成'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">reject</span><span class="crayon-sy">(</span><span class="crayon-s">'收拾桌子洗完--出错'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-30"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-31">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-32"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Promise</span><span class="crayon-sy">(</span><span class="crayon-v">step1</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-33"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-34"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Promise</span><span class="crayon-sy">(</span><span class="crayon-v">step2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-35">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-36"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-37"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-38"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Promise</span><span class="crayon-sy">(</span><span class="crayon-v">step3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-39"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-40"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f31f9446847445-41"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">val</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31f9446847445-42"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0101 seconds] -->
<p>Promis在现在的开发中使用率算是最高的，而且你面试前端都会考这个对象，大家一定要掌握好。</p>
<h1><span id="17class">第17节：class类的使用</span></h1>
<p>我们在ES5中经常使用方法或者对象去模拟类的使用，虽然可以实现功能，但是代码并不优雅，ES6为我们提供了类的使用。需要注意的是我们在写类的时候和ES5中的对象和构造函数要区分开来，不要学混了。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=i0524jpvubs&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>类的声明</h3>
<p>先声明一个最简单的coder类，类里只有一个name方法，方法中打印出传递的参数。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f31fe404663791" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
class coder{
    name(val){
        console.log(val);
    }
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f31fe404663791-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31fe404663791-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f31fe404663791-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f31fe404663791-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f31fe404663791-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f31fe404663791-1"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">coder</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31fe404663791-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f31fe404663791-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f31fe404663791-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f31fe404663791-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p></p>
<h3>类的使用</h3>
<p>我们已经声明了一个类，并在类里声明了name方法，现在要实例化类，并使用类中的方法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3201346437720" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
class Coder{
    name(val){
        console.log(val);
    }
}

let jspang= new Coder;
jspang.name('jspang');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3201346437720-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3201346437720-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3201346437720-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3201346437720-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3201346437720-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3201346437720-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3201346437720-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3201346437720-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3201346437720-1"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">Coder</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3201346437720-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3201346437720-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3201346437720-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f3201346437720-5"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3201346437720-6">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3201346437720-7"><span class="crayon-e">let </span><span class="crayon-v">jspang</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Coder</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3201346437720-8"><span class="crayon-v">jspang</span><span class="crayon-sy">.</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p></p>
<h3>类的多方法声明</h3>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3204176506448" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('jspang')+':'+'Skill:'+val);
    }
}

let jspang= new Coder;
jspang.name('jspang');
jspang.skill('web');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3204176506448-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3204176506448-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3204176506448-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3204176506448-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3204176506448-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3204176506448-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3204176506448-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3204176506448-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f3204176506448-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3204176506448-10">10</div><div class="crayon-num" data-line="crayon-5a1e77c7f3204176506448-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3204176506448-12">12</div><div class="crayon-num" data-line="crayon-5a1e77c7f3204176506448-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3204176506448-1"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">Coder</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3204176506448-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3204176506448-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3204176506448-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">val</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3204176506448-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3204176506448-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">skill</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3204176506448-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span><span class="crayon-o">+</span><span class="crayon-s">':'</span><span class="crayon-o">+</span><span class="crayon-s">'Skill:'</span><span class="crayon-o">+</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3204176506448-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f3204176506448-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3204176506448-10">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3204176506448-11"><span class="crayon-e">let </span><span class="crayon-v">jspang</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">Coder</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3204176506448-12"><span class="crayon-v">jspang</span><span class="crayon-sy">.</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3204176506448-13"><span class="crayon-v">jspang</span><span class="crayon-sy">.</span><span class="crayon-e">skill</span><span class="crayon-sy">(</span><span class="crayon-s">'web'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0041 seconds] -->
<p>这里需要注意的是两个方法中间不要写逗号了，还有这里的this指类本身，还有要注意return 的用法。</p>
<h3>类的传参</h3>
<p>在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3207184449864" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('jspang')+':'+'Skill:'+val);
    }

    constructor(a,b){
        this.a=a;
        this.b=b;
    }

    add(){
        return this.a+this.b;
    }
}

let jspang=new Coder(1,2);
console.log(jspang.add());</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3207184449864-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3207184449864-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3207184449864-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f3207184449864-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f3207184449864-9">9</div><div class="crayon-num crayon-marked-num crayon-top crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-10">10</div><div class="crayon-num crayon-marked-num" data-line="crayon-5a1e77c7f3207184449864-11">11</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-12">12</div><div class="crayon-num crayon-marked-num" data-line="crayon-5a1e77c7f3207184449864-13">13</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-14">14</div><div class="crayon-num crayon-marked-num" data-line="crayon-5a1e77c7f3207184449864-15">15</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-16">16</div><div class="crayon-num crayon-marked-num crayon-bottom" data-line="crayon-5a1e77c7f3207184449864-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-18">18</div><div class="crayon-num" data-line="crayon-5a1e77c7f3207184449864-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3207184449864-20">20</div><div class="crayon-num" data-line="crayon-5a1e77c7f3207184449864-21">21</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3207184449864-1"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">Coder</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3207184449864-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">val</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3207184449864-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">skill</span><span class="crayon-sy">(</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5a1e77c7f3207184449864-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">)</span><span class="crayon-o">+</span><span class="crayon-s">':'</span><span class="crayon-o">+</span><span class="crayon-s">'Skill:'</span><span class="crayon-o">+</span><span class="crayon-v">val</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f3207184449864-9">&nbsp;</div><div class="crayon-line crayon-marked-line crayon-top crayon-striped-line" id="crayon-5a1e77c7f3207184449864-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">constructor</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line" id="crayon-5a1e77c7f3207184449864-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-v">a</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">b</span><span class="crayon-o">=</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line" id="crayon-5a1e77c7f3207184449864-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-14">&nbsp;</div><div class="crayon-line crayon-marked-line" id="crayon-5a1e77c7f3207184449864-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom" id="crayon-5a1e77c7f3207184449864-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-18"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5a1e77c7f3207184449864-19">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3207184449864-20"><span class="crayon-e">let </span><span class="crayon-v">jspang</span><span class="crayon-o">=</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Coder</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3207184449864-21"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">jspang</span><span class="crayon-sy">.</span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0034 seconds] -->
<p>我们用constructor来约定了传递参数，然后用作了一个add方法，把参数相加。这和以前我们的传递方法有些不一样，所以需要小伙伴们多注意下。</p>
<h3>class的继承</h3>
<p>如果你学过java，一定知道类的一大特点就是继承。ES6中也就继承，在这里我们简单的看看继承的用法。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f320b916858192" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
class htmler extends Coder{

}

let pang=new htmler;
pang.name('技术胖');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f320b916858192-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f320b916858192-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f320b916858192-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f320b916858192-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f320b916858192-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f320b916858192-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f320b916858192-1"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">htmler</span><span class="crayon-h"> </span><span class="crayon-r">extends</span><span class="crayon-h"> </span><span class="crayon-e">Coder</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f320b916858192-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f320b916858192-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f320b916858192-4">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f320b916858192-5"><span class="crayon-e">let </span><span class="crayon-v">pang</span><span class="crayon-o">=</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-v">htmler</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f320b916858192-6"><span class="crayon-v">pang</span><span class="crayon-sy">.</span><span class="crayon-e">name</span><span class="crayon-sy">(</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>声明一个htmler的新类并继承Coder类，htmler新类里边为空，这时候我们实例化新类，并调用里边的name方法。结果也是可以调用到的。</p>
<p>&nbsp;</p>
<h1><span id="18">第18节：模块化操作</span></h1>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=q0524tc6c1m&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>在ES5中我们要进行模块华操作需要引入第三方类库，随着前后端分离，前端的业务日渐复杂，ES6为我们增加了模块话操作。模块化操作主要包括两个方面。</p>
<ul>
<li>export :负责进行模块化，也是模块的输出。</li>
<li>import : 负责把模块引，也是模块的引入操作。</li>
</ul>
<h3>export的用法：</h3>
<p>export可以让我们把变量，函数，对象进行模块话，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个temp.js文件，然后在文件中输出一个模块变量。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f320f828227817" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
export var a = 'jspang';</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f320f828227817-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f320f828227817-1"><span class="crayon-e">export </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'jspang'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0001 seconds] -->
<p>然后可以在index.js中以import的形式引入。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3211984630824" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import {a} from './temp.js';

console.log(a);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3211984630824-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3211984630824-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3211984630824-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3211984630824-1"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./temp.js'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3211984630824-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3211984630824-3"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p>这就是一个最简单的模块的输出和引入。</p>
<h3><strong>多变量的输出</strong></h3>
<p>这里声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3214427527118" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var a ='jspang';
var b ='技术胖';
var c = 'web';

export {a,b,c}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3214427527118-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3214427527118-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3214427527118-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3214427527118-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f3214427527118-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3214427527118-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3214427527118-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3214427527118-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">c</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'web'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3214427527118-4">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f3214427527118-5"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">,</span><span class="crayon-v">c</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p></p>
<h3><strong>函数的模块化输出</strong></h3>
<p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3217962808725" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
export function add(a,b){
    return a+b;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3217962808725-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f3217962808725-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f3217962808725-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3217962808725-1"><span class="crayon-e">export </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f3217962808725-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f3217962808725-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0033 seconds] -->
<p></p>
<h3><strong>as的用法</strong></h3>
<p>有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f321a871171311" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var a ='jspang';
var b ='技术胖';
var c = 'web';

export {
    x as a,
    y as b,
    z as c
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f321a871171311-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f321a871171311-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f321a871171311-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f321a871171311-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f321a871171311-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f321a871171311-6">6</div><div class="crayon-num" data-line="crayon-5a1e77c7f321a871171311-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f321a871171311-8">8</div><div class="crayon-num" data-line="crayon-5a1e77c7f321a871171311-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f321a871171311-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f321a871171311-2"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-s">'技术胖'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f321a871171311-3"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">c</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'web'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f321a871171311-4">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f321a871171311-5"><span class="crayon-e">export</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f321a871171311-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">x</span><span class="crayon-h"> </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5a1e77c7f321a871171311-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f321a871171311-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">z</span><span class="crayon-h"> </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-i">c</span></div><div class="crayon-line" id="crayon-5a1e77c7f321a871171311-9"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p></p>
<h3>export default的使用</h3>
<p>加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export   default的区别</p>
<p><strong>1.export</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f321d658688795" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
export var a ='jspang';

export function add(a,b){
    return a+b;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f321d658688795-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f321d658688795-2">2</div><div class="crayon-num" data-line="crayon-5a1e77c7f321d658688795-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-5a1e77c7f321d658688795-4">4</div><div class="crayon-num" data-line="crayon-5a1e77c7f321d658688795-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f321d658688795-1"><span class="crayon-e">export </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f321d658688795-2">&nbsp;</div><div class="crayon-line" id="crayon-5a1e77c7f321d658688795-3"><span class="crayon-e">export </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5a1e77c7f321d658688795-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">+</span><span class="crayon-v">b</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a1e77c7f321d658688795-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0014 seconds] -->
<p>对应的导入方式</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3220831212149" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import {a,add} form './temp';//也可以分开写</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3220831212149-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3220831212149-1"><span class="crayon-e">import</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-sy">,</span><span class="crayon-v">add</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-i">form</span><span class="crayon-h"> </span><span class="crayon-s">'./temp'</span><span class="crayon-sy">;</span><span class="crayon-c">//也可以分开写</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p>2.export defalut</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3222989648811" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
export default var a='jspang';</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3222989648811-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3222989648811-1"><span class="crayon-e">export </span><span class="crayon-st">default</span><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-o">=</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0001 seconds] -->
<p>对应的引入方式</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-5a1e77c7f3225382789249" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
import str from './temp';</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5a1e77c7f3225382789249-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a1e77c7f3225382789249-1"><span class="crayon-e">import </span><span class="crayon-e">str </span><span class="crayon-i">from</span><span class="crayon-h"> </span><span class="crayon-s">'./temp'</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0001 seconds] -->
<p>&nbsp;</p>
<p>ES6的模块化不能直接在浏览器中预览，必须要使用Babel进行编译之后正常看到结果。这节课讲完我们ES6的课程就算结束了，你可能觉的没有书上的内容多，那是因为很多东西都归到了ES7中。甚至连Babel都不能很好的转换，这些知识我就不给大家讲解了。另外如果你想继续深入学习，可以搜索阮一峰大神的ES6在线图书。我是技术胖，那我们下套课程见了。</p>
		</article>
								<div class="post-copyright">未经允许不得转载：<a href="http://jspang.com">技术胖-胜洪宇关注web前端技术</a> &raquo; <a href="http://jspang.com/2017/06/03/es6/">技术胖带你玩转ES6视频教程</a></div>				
					<div class="action-share"><div class="bdsharebuttonbox">
<span>分享到：</span>
<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a>
<a class="bds_tqf" data-cmd="tqf" title="分享到腾讯朋友"></a>
<a class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
<a class="bds_more" data-cmd="more">更多</a> <span>(</span><a class="bds_count" data-cmd="count" title="累计分享0次">0</a><span>)</span>
</div>
<script>
window._bd_share_config = {
    common: {
		"bdText"     : "",
		"bdMini"     : "2",
		"bdMiniList" : false,
		"bdPic"      : "",
		"bdStyle"    : "0",
		"bdSize"     : "24"
    },
    share: [{
        bdCustomStyle: "http://jspang.com/wp-content/themes/dux/css/share.css"
    }]
}
with(document)0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion="+~(-new Date()/36e5)];
</script></div>
		
		<div class="article-tags">标签：<a href="http://jspang.com/tag/es6/" rel="tag">ES6</a></div>
		
		
		            <nav class="article-nav">
                <span class="article-nav-prev">上一篇<br><a href="http://jspang.com/2017/05/22/vuedemo/" rel="prev">Vue实战视频-快餐店收银系统</a></span>
                <span class="article-nav-next">下一篇<br><a href="http://jspang.com/2017/06/28/01/" rel="next">《前端成神软技能》-7月篇</a></span>
            </nav>
        
				<div class="relates"><div class="title"><h3>相关推荐</h3></div><ul><li><a href="http://jspang.com/2016/06/28/generator001/">ES6学习：Generator函数详解</a></li><li><a href="http://jspang.com/2016/06/14/es6001/">ES6的Set数据结构详解</a></li><li><a href="http://jspang.com/2017/11/13/koa2/">挑战全栈 Koa2免费视频教程 <span>(更新中)</span></a></li><li><a href="http://jspang.com/2017/09/16/webpack3-2/">Webpack3.X版 成神之路 全网首发 <span>(共24集)</span></a></li><li><a href="http://jspang.com/2017/01/11/fabricjsbasic/">步入Fabric.js 中文视频教程</a></li></ul></div>					</div>
	</div>
	<aside class="sidebar">
<div class="widget widget_ui_ads"><div class="item"><a href=" http://jspang.com/2017/11/09/tequan/" target="_blank"><img src="style/images/dashang30.jpg"></a></div></div>		<div class="widget widget_recent_entries">		<h3>近期文章</h3>		<ul>
											<li>
					<a href="http://jspang.com/2017/11/29/success/">留言功能恢复提示</a>
									</li>
											<li>
					<a href="http://jspang.com/2017/11/28/donenotebook/">留言功能失效提醒</a>
									</li>
											<li>
					<a href="http://jspang.com/2017/11/13/koa2/">挑战全栈 Koa2免费视频教程</a>
									</li>
											<li>
					<a href="http://jspang.com/2017/11/11/vuedemo-2/">VUE+Koa实战移动商城课程开始筹备</a>
									</li>
											<li>
					<a href="http://jspang.com/2017/11/09/tequan/">打赏后获得特权方法</a>
									</li>
					</ul>
		</div></aside></section>


<footer class="footer">
	<div class="container">
						<p>&copy; 2017 <a href="http://jspang.com">技术胖-胜洪宇关注web前端技术</a> &nbsp; <a href="http://jspang.com/sitemap.xml">网站地图</a>
</p>
		<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f71290979fed5851ccca7bda346dcdf7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>	</div>
</footer>

<script>
window.jsui={
    www: 'http://jspang.com',
    uri: 'http://jspang.com/wp-content/themes/dux',
    ver: '3.0',
	roll: ["1","2"],
    ajaxpager: '5',
    url_rp: 'http://jspang.com/sample-page/'
};
</script>
<script type='text/javascript' src='style/js/smartideo.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"\u663e\u793a","visibility_hide":"\u9690\u85cf","width":"Auto"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/front.min.js'></script>
<script type='text/javascript' src='style/js/bootstrap.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","post_id":"1695"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/postviews-cache.js'></script>
<script type='text/javascript' src='style/js/bootstrap.min.js'></script>
<script type='text/javascript' src='style/js/loader.js'></script>
<script type='text/javascript' src='style/js/wp-embed.min.js'></script>
	    <script type="type/html" id="xhshop_payment_gateways_jspai_html">
    	    <div id="xhshop-pay-callback-payment-gateway">
    		<div class="xunhupay open"  onclick="window.XHSHOP.payment_gateway.hide();"></div>
        		<ul class="xunhupay-list" id="xunhupay-list" style="display: none;">
            		<li class="xunhupay-loading" style="border-top:0;display:none;"></li>
            		<li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-alipay-payment');"  class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon.png) center no-repeat;"></i><span>点击付款</span></li><li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-wechat-payment');" style="border-bottom:0" class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon01.png) center no-repeat;"></i><span>点击付款</span></li>            		<li class="xunhupay-close" onclick="window.XHSHOP.payment_gateway.hide();"></li>
        		</ul>
    		</div>
		</script>
				<script type="text/javascript">
		(function($){
			if(!window.XHSHOP){window.XHSHOP={};}
			window.XHSHOP.url_ajax ='http://jspang.com/wp-admin/admin-ajax.php';
			window.XHSHOP.alert=function(msg){alert(msg);};
			window.XHSHOP.beforeSend=function(){$('.xunhupay-loading').css('display','block');};
			window.XHSHOP.complete=function(){};
			window.XHSHOP.error=function(e){window.XHSHOP.alert("系统异常，请稍候重试！");};
			window.XHSHOP.finish=function(){$('.xunhupay-loading').css('display','none');};
			window.XHSHOP.unauth =function(callback){(function(){location.href="/wp-login.php?redirect_to="+encodeURIComponent(location.href.toString());})();};
	
			window.XHSHOP.pay=function(data){
							    window.XHSHOP.payment_gateway.show(data);
			    			};
			
			window.XHSHOP.payment_gateway={
					__data:null,
					__beforeSends:[window.XHSHOP.beforeSend],
					__completes:[window.XHSHOP.complete],
					__finishs:[window.XHSHOP.finish],
					show:function(data){
						window.XHSHOP.payment_gateway.__data=data;
						window.XHSHOP.payment_gateways_templete=$('#xhshop_payment_gateways_jspai_html').html();
						
												
						window.XHSHOP.payment_gateway.hide();
				 		$('body').append(window.XHSHOP.payment_gateways_templete);
				 		$('#xunhupay-list').fadeIn();
				 		window.XHSHOP.payment_gateway.__resize();
				 		
				 							},
					__resize : function(){
			 			if(document.documentElement.clientWidth<=450){
			 				return;
			 			}
						var d = document.getElementById('xunhupay-list');
						if(d==null){return;}
						d.style.top = ((document.documentElement.clientHeight - d.offsetHeight) / 2) + "px";
						d.style.left = ((document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
			 		},
					hide:function(){
												var $gateway =$('#xhshop-pay-callback-payment-gateway');
						if($gateway.length>0){
							$gateway.remove();
						}
											},
					submit:function(payment_gateway_id){
						var data =window.XHSHOP.payment_gateway.__data;
						if(!data){data={};}
						data.action='XHSHOP_SHIPPINGS_SIMPLE_PAY';
						data.callback='?';
						data.call_url=encodeURIComponent(location.href.toString());
						data.payment_gateway=payment_gateway_id;
						$.ajax({
							url:window.XHSHOP.url_ajax,
							type:'post',
							timeout:60*1000,
							async:true,
							cache:false,
							data:data,
							traditional:false,
							dataType: "jsonp",
							jsonp: "callback", 
							beforeSend:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__beforeSends.length;i++){
									window.XHSHOP.payment_gateway.__beforeSends[i]();
								}
							},
							complete:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__completes.length;i++){
									window.XHSHOP.payment_gateway.__completes[i]();
								}
							},
							success:function(call){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								if(!call){
									return;
								}
								
								if(call.errcode!=0){
									if(call.errcode==501){
										window.XHSHOP.unauth();
										return;
									}
									
																		window.XHSHOP.payment_gateway.hide();
									window.XHSHOP.alert('errcode:'+call.errcode+';errmsg:'+call.errmsg);
									return;
								}
								
																$('body').append('<div style="display:none;">'+call.errmsg+'</div>');
							},
							error:function(e){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								console.warn(e.responseText);
								window.XHSHOP.error(e);
								window.XHSHOP.payment_gateway.hide();
							}
						});
					}
    			};
    		})(jQuery);
		</script>
	    </body>
</html>
<!-- Dynamic page generated in 8.800 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-11-29 17:03:06 -->

<!-- Compression = gzip -->